10
FEV

Tutorial: Un système de gestion d'images complet pour son site #1 Upload

Publié le 10/02/09 à 08h27 par DJo

Dans ce nouveau tutorial, nous allons voir comment créer en plusieurs étapes un système de gestion d'images complet en PHP pour vos sites web.

Tutorial La Ferme du Web - Création d'un système de gestion d'image complet en PHP

L'objectif de ce tutorial est de pouvoir:

  • Uploader une ou plusieurs images d'un coup à partir de son pc
  • Redimensionner automatiquement et traiter les images uploadées (Version watermark et version originale)
  • Ajouter un explorateur d'images pour pouvoir les insérer dans nos billets / articles avec TinyMCE

 

Plan du tuto:

 

Mise en place de la popup d'Upload: FancyUpload

La première étape consiste à mettre en place le système d'upload.

 

Choix de l'uploader

Il existe plusieurs solutions d'upload: Java, Ajax/PHP, Flash/PHP.

J'ai décidé d'opter pour la solution Ajax/PHP qui me semble plus light et tout aussi bien réussie visuellement (Progress bar etc.).

FancyUploadComme notre but n'est pas de réinventer la roue, nous allons utiliser un plugin Mootools: FancyUpload

Ce plugin n'est pas 100% Ajax car il utilise aussi le Flash Swiff en background.

Il faut donc Mootools + Flash 10 pour faire marcher notre uploader.

Téléchargez Mootools si vous ne l'avez pas encore.

Téléchargez le pack FancyUpload

 

Arborescence de notre système

Avant le mettre en place notre uploader, nous allons créer l'arborescence de notre système de gestion d'images.

Voici l'arbo que je vais utiliser pour le tutorial:

Arbirescence de notre système de gestion d'images

class/ contiendra les classes PHP que nous utiliserons.

web/ le répertoire web du projet, il contiendra le fichier index.php

web/css/ contiendra toutes les feuilles de style

web/images/ contiendra toutes les images uploadées.

web/images/.mini/ contiendra toutes les images en version miniature (Pour les listes)

web/images/.orig/ contendra les images en version originales (Sans aucun traitement)

web/js/ contiendra tous les fichiers Javascript (Mootools, FancyUpload ...)

 

Fichiers PHP:

web.index.php : La page permettant la rédaction d'un billet, article ... avec notre zone TInyMCE.

web/uploader.php : Page popup permettant d'uploader nos images sans quitter la page index.php.

web/doUpload.php : Script PHP qui va contrôler l'upload et traiter les images.

 

A vous d'adapter le tutorial aux contraintes et besoins de votre site.

 

Mise en place de notre POPUP uploader

Nous allons maintenant créer une popup Uploader (uploader.php) qui pourra être lancée à partir de notre index.php.

1) Insertion des librairies Javascript

Créez le fichier web/uploader.php si ce n'est pas encore fait. Puis ajoutez les scripts JS dans votre balise head.

    <script type="text/javascript" src="/js/mootools.js"></script>
    <script type="text/javascript" src="/js/Swiff.Uploader.js"></script>
    <script type="text/javascript" src="/js/Fx.ProgressBar.js"></script>
    <script type="text/javascript" src="/js/FancyUpload2.js"></script>

 

2) Création du formulaire d'upload

Nous allons maintenant ajouter le code du formulaire:

<form action="/doUpload.php" method="post" enctype="multipart/form-data" id="form-demo">
	<fieldset id="demo-fallback">
		<label for="demo-photoupload">
			Upload images:
			<input type="file" name="photoupload" id="demo-photoupload" />
		</label>
	</fieldset>

	<div id="demo-status" class="hide">
		<p>
			<a href="#" id="demo-browse">Explorer les fichiers</a> |
			<input type="checkbox" id="demo-select-images" checked /> Images uniquement |
			<a href="#" id="demo-clear">Effacer la liste</a> |
			<a href="#" id="demo-upload">Upload !</a>
		</p>
		<div>
			<strong class="overall-title">Progression totale</strong><br />
			<img src="/images/assets/progress-bar/bar.gif" class="progress overall-progress" />
		</div>
		<div>
			<strong class="current-title">Progression du fichier</strong><br />
			<img src="/images/assets/progress-bar/bar.gif" class="progress current-progress" />
		</div>
		<div class="current-text"></div>
	</div>

	<ul id="demo-list"></ul>
</form>

Vérifiez d'avoir bien mis les images de la progress bar dans le répertoire /images/assets/progress-bar/.

Notre formulaire appellera le fichier doUpload.php qui sera chargé de la validation et du traitement des images.

A vous de rajouter un peu de style à votre Uploader avec du CSS.

Pour les plus fainéants, voici un style par défaut pour votre Uploader:

body {
    font-family: Arial, Verdana;
    font-size: 12px;
}
h2 {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
    color: #5b2b2b;
    font-family: Verdana, Arial, Tahoma;
    margin-bottom: 4px;
}
#demo-status
{
    background-color:        #F9F7ED;
    padding:                10px 15px;
    width:                    420px;
}

#demo-status .progress
{
    background:                white url(/images/assets/progress-bar/progress.gif) no-repeat;
    background-position:    +50% 0;
    margin-right:            0.5em;
}

#demo-status .progress-text
{
    font-size:                0.9em;
    font-weight:            bold;
}

#demo-list
{
    list-style:                none;
    width:                    350px;
    margin:                    0;
}

#demo-list li.file
{
    border-bottom:            1px solid #eee;
    background:                url(/images/assets/file.png) no-repeat 4px 4px;
}
#demo-list li.file.file-uploading
{
    background-image:        url(/images/assets/uploading.png);
    background-color:        #D9DDE9;
}
#demo-list li.file.file-success
{
    background-image:        url(/images/assets/success.png);
}
#demo-list li.file.file-failed
{
    background-image:        url(/images/assets/failed.png);
}

#demo-list li.file .file-name
{
    font-size:                1.2em;
    margin-left:            44px;
    display:                block;
    clear:                    left;
    line-height:            40px;
    height:                    40px;
    font-weight:            bold;
}
#demo-list li.file .file-size
{
    font-size:                0.9em;
    line-height:            18px;
    float:                    right;
    margin-top:                2px;
    margin-right:            6px;
}
#demo-list li.file .file-info
{
    display:                block;
    margin-left:            44px;
    font-size:                0.9em;
    line-height:            20px;
}
#demo-list li.file .file-remove
{
    clear:                    right;
    float:                    right;
    line-height:            18px;
    margin-right:            6px;
}

 

Si vous n'avez pas les images, téléchargez le pack d'images du tutorial.

 

3) Ajout de la couche Javascript FancyUpload

Nous avons beau avoir inséré nos librairies javascript, maintenant il faut faire reconnaitre le formulaire à FancyUpload.

Après votre balise body ou même dans le head, ajoutez le code Javascript suivant:

window.addEvent('load', function() {

	var swiffy = new FancyUpload2($('demo-status'), $('demo-list'), {
		url: $('form-demo').action,
		fieldName: 'photoupload',
		path: '/js/Swiff.Uploader.swf',
		limitSize: 2 * 1024 * 1024, // 2Mb
		onLoad: function() {
			$('demo-status').removeClass('hide');
			$('demo-fallback').destroy();
		},
		// The changed parts!
		debug: true, // enable logs, uses console.log
		target: 'demo-browse' // the element for the overlay (Flash 10 only)
	});

	filter = {'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'};
	swiffy.options.typeFilter = filter;
	/**
	 * Various interactions
	 */

	$('demo-browse').addEvent('click', function() {
		/**
		 * Doesn't work anymore with Flash 10: swiffy.browse();
		 * FancyUpload moves the Flash movie as overlay over the link.
		 * (see opeion "target" above)
		 */
		swiffy.browse();
		return false;
	});

	/**
	 * The *NEW* way to set the typeFilter, since Flash 10 does not call
	 * swiffy.browse(), we need to change the type manually before the browse-click.
	 */
	$('demo-select-images').addEvent('change', function() {
		var filter = null;
		if (this.checked) {
			filter = {'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'};
		}
		swiffy.options.typeFilter = filter;
	});

	$('demo-clear').addEvent('click', function() {
		swiffy.removeFile();
		return false;
	});

	$('demo-upload').addEvent('click', function() {
		swiffy.upload();
		return false;
	});

});

Vous pouvez bien sûr adapter les ID suivant ce que vous avez mis lors de l'étape 2.

A cette étape, notre popup uploader est prête.

 

Lien vers notre popup Uploader

Ouvrez le fichier index.php, et rajoutez le lien suivant où vous souhaitez:

<a onclick="window.open ('uploader.php', 'Uploader vos images', config='height=400, width=470, toolbar=no, 
menubar=no, scrollbars=yes, resizable=no, location=no, directories=no, status=no'); return false;" 
href="uploader.php">Uploader des images pour le billet</a>

Vous pouvez maintenant tester si l'uploader se lance correctement et si toutes les images et explorateur fonctionnent bien.

Preview de notre Uploader

Voilà ce que vous devriez obtenir à quelque chose prêt.

Si ce n'est pas le cas, vérifiez que vous avez bien mis vos images dans les bons répertoires, que vous avez bien chargé les Javascripts et que vous avez bien mis le fichier Flash Swiff.Uploader.swf dans le répertoire js/

 

Fin de la première partie du tutorial

Voilà pour la première étape. Pour le moment, nous avons mis en place l'aspect visuel de notre Uploader.

Prochaine étape, contrôler les images uploadées et les rediriger dans les répertoires dédiés avec une classe PHP5.

 

AIde et support: Un topic dédié au tutorial a été créé sur le forum. Merci de l'utiliser si vous rencontrez un problème quelconque. (Pas de support sur les commentaires).

Etape 2: Utilisation d'une classe d'Upload pour gérer l'upload des images

Baraguiné par Double-C le 10/02/09 à 12h54
Double-C sur La Ferme du Web
Une très bonne idée ce tuto, je vais certainement en avoir besoin dans pas longtemps, j'attends donc la suite avec impatience :D
Baraguiné par yanthorpes le 10/02/09 à 15h47
yanthorpes sur La Ferme du Web
Je confirme c'est super utile ce tuto !!!!
Merci beaucoup et vivement la prochaine !
Baraguiné par Viick le 10/02/09 à 18h59
Viick sur La Ferme du Web
Ah bein ça t'a donné une idée quand même... Si tu l'avait pas déjà en t^te ^^
En tout cas très bon tuto, j'essairais !
Baraguiné par DJo le 10/02/09 à 21h38
DJo sur La Ferme du Web
De quoi qui m'a donnée l'idée ? lol
Non j'avais planifié depuis un bon bout de temps de faire ce tuto, car j'ai passé du temps à trouver une solution efficace pour mes applis web :P J'espère qu'il vous sera utile !
Baraguiné par minipipo1 le 22/08/09 à 13h25
minipipo1 sur La Ferme du Web
J'ai un petit problème, les images ne s'affichent pas, est-ce-que ce ne serait pas à cause de la librairie GD, il faut qu'elle soit activée??
Baraguiné par le 28/08/09 à 10h40
@minipipo1 vérifie que tu as la librairy gd

Super tutoriel comme toujours, je vais pouvoir m'en inspirer.
Baraguiné par le 23/04/10 à 01h42
Oh je t'aime! Je vais pouvoir me dormir cette nuit! :p
Baraguiné par pressorus le 20/05/10 à 23h08
pressorus sur La Ferme du Web
Mille merci pour ce tuto, aujourd'hui, tu me sauve la vie, ça fonctionne à merveille le multi-upload !!
Je l'ai intégré à une interface admin avec sql.. Parfait !
Baraguiné par regattasup le 28/09/10 à 20h50
regattasup sur La Ferme du Web
mmm dsl mais j'ai rencontré des problemes dans l'affichage des images je ne sais po prq j'ai verifié les chemins tt va bien. qlq un a une idée qu'est ce qu'il pourra causer ce probleme.
merci d'avance
Baraguiné par yanickinfo le 04/06/15 à 08h16
yanickinfo sur La Ferme du Web
Slt à tous je suis nouveau dans le site et débutant dans le developpement web.
Par rapport au tutorial, je ne parviens vraiment pas à Uploader les fichiers images j'ai tout fait et tout revérifié mais l'interface de l'upload reste intacte.
Depuis une semaine, je travaille dessus sans succès.
Je souhaiterai que quelqu'un puisse me faire parvenir tout le package afin que je puisse retrouver mes erreurs ou m'assiste dans la procédure s'il faut tout reprendre une fois de plus.
Merci.
Baraguiné par yanickinfo le 04/06/15 à 08h16
yanickinfo sur La Ferme du Web
Slt à tous je suis nouveau dans le site et débutant dans le developpement web.
Par rapport au tutorial, je ne parviens vraiment pas à Uploader les fichiers images j'ai tout fait et tout revérifié mais l'interface de l'upload reste intacte.
Depuis une semaine, je travaille dessus sans succès.
Je souhaiterai que quelqu'un puisse me faire parvenir tout le package afin que je puisse retrouver mes erreurs ou m'assiste dans la procédure s'il faut tout reprendre une fois de plus.
Merci.
Baraguiné par yanickinfo le 04/06/15 à 08h16
yanickinfo sur La Ferme du Web
Slt à tous je suis nouveau dans le site et débutant dans le developpement web.
Par rapport au tutorial, je ne parviens vraiment pas à Uploader les fichiers images j'ai tout fait et tout revérifié mais l'interface de l'upload reste intacte.
Depuis une semaine, je travaille dessus sans succès.
Je souhaiterai que quelqu'un puisse me faire parvenir tout le package afin que je puisse retrouver mes erreurs ou m'assiste dans la procédure s'il faut tout reprendre une fois de plus.
Merci.
Baraguiné par yanickinfo le 04/06/15 à 08h16
yanickinfo sur La Ferme du Web
Slt à tous je suis nouveau dans le site et débutant dans le developpement web.
Par rapport au tutorial, je ne parviens vraiment pas à Uploader les fichiers images j'ai tout fait et tout revérifié mais l'interface de l'upload reste intacte.
Depuis une semaine, je travaille dessus sans succès.
Je souhaiterai que quelqu'un puisse me faire parvenir tout le package afin que je puisse retrouver mes erreurs ou m'assiste dans la procédure s'il faut tout reprendre une fois de plus.
Merci.
Baraguiné par yanickinfo le 04/06/15 à 08h16
yanickinfo sur La Ferme du Web
Slt à tous je suis nouveau dans le site et débutant dans le developpement web.
Par rapport au tutorial, je ne parviens vraiment pas à Uploader les fichiers images j'ai tout fait et tout revérifié mais l'interface de l'upload reste intacte.
Depuis une semaine, je travaille dessus sans succès.
Je souhaiterai que quelqu'un puisse me faire parvenir tout le package afin que je puisse retrouver mes erreurs ou m'assiste dans la procédure s'il faut tout reprendre une fois de plus.
Merci.
Baraguiné par yanickinfo le 04/06/15 à 08h16
yanickinfo sur La Ferme du Web
Slt à tous je suis nouveau dans le site et débutant dans le developpement web.
Par rapport au tutorial, je ne parviens vraiment pas à Uploader les fichiers images j'ai tout fait et tout revérifié mais l'interface de l'upload reste intacte.
Depuis une semaine, je travaille dessus sans succès.
Je souhaiterai que quelqu'un puisse me faire parvenir tout le package afin que je puisse retrouver mes erreurs ou m'assiste dans la procédure s'il faut tout reprendre une fois de plus.
Merci.
Baraguiné par yanickinfo le 04/06/15 à 08h16
yanickinfo sur La Ferme du Web
Slt à tous je suis nouveau dans le site et débutant dans le developpement web.
Par rapport au tutorial, je ne parviens vraiment pas à Uploader les fichiers images j'ai tout fait et tout revérifié mais l'interface de l'upload reste intacte.
Depuis une semaine, je travaille dessus sans succès.
Je souhaiterai que quelqu'un puisse me faire parvenir tout le package afin que je puisse retrouver mes erreurs ou m'assiste dans la procédure s'il faut tout reprendre une fois de plus.
Merci.

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web