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.

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
• Utilisation d'une classe d'Upload pour gérer l'upload des images
• Création des images redimensionnées et avec watermark
• Modification d'un plugin TinyMCE pour l'exploration et l'insertion de nos images

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

Maintenant que notre uploader est prêt, nous allons pouvoir contrôler les images envoyées et les traiter suivant le besoin.

J'utilise pour mes projets une classe d'Upload et de gestion d'images formidable: upload.class.php de Verot.net

Cette classe est tout bonnement géniale, vous aurez l'occasion de voir sa puissance dans la suite du tutorial et notamment dans la partie de redimension et de watermark des images.

1) Récupérer la classe Upload

Téléchargez la classe et copiez là dans le répertoire class/

2) Récupérer les fichiers uploadés avec la classe

Ouvrez le fichier web/doUpload.php et ajoutez un include de la classe d'upload.

<?php
    include("../class/upload.class.php");

Maintenant, nous allons devoir récupérer les fichiers uploadés pour les traiter avec notre classe et vérifier que l'upload n'a pas échoué:

  $handle = new upload($_FILES['photoupload']);
  if ($handle->uploaded) {
      // Images bien uploadées
  }

3) Rediriger nos images uploadées dans le répertoire d'images

  $handle = new upload($_FILES['photoupload']);
  if ($handle->uploaded) {
      $handle->Process("CHEMIN_ABSOLU_VERS_SITE/web/images/");
	if ($handle->processed) {
	   $handle->clean();
	   // Image uploadée avec succès !
	} else {
         echo $handle->error;
	  $handle->clean();
	}
  }

La méthode Process permet de valider le transfert et de copier l'image uploadée dans le répertoire que l'on passe en paramètres.

La méthode clean permet de nettoyer les fichiers temporaires de l'upload ...

Avec ce code, nous nous contentons de copier l'image uploadée dans le répertoire images/ de notre application, sans aucuns contrôles ni modifications de l'image.

4) Ajouter des restrictions et contrôles sur les fichiers uploadés

Si vous souhaitez contrôler la taille maximum des images envoyées ou leur résolution, vous pouvez ajouter les contrôles suivants:

• image_max_width Largeur maximum de l'image.

  $handle->image_max_width = 200;

• image_max_height Hauteur maximum de l'image

  $handle->image_max_height = 100;

• image_max_pixels Nombre de pixels maximum

  $handle->image_max_pixels = 50000;

• image_max_ratio Ratio (width/height) maximum

  $handle->image_max_ratio = 1.5;

• image_min_width Largeur minimum requis

  $handle->image_min_width = 100;

• image_min_height Hauteur minimum requise

  $handle->image_min_height = 500;

• image_min_pixels Nombre de pixels minimum requis

  $handle->image_min_pixels = 20000;

• image_min_ratio Ratio (width/height) minimum requis.

  $handle->image_min_ratio = 0.5;

• image_resize determines is an image will be resized (default: false)

  $handle->image_resize = true;

• allowed mime-types autorisés.

  $handle->allowed = array('application/pdf','application/msword', 'image/*');

• forbidden mime-types interdits

  $handle->forbidden = array('application/*');

Les paramètres de contrôles doivent être ajoutés avant l'appel de la méthode Process.

Exemple: Nous souhaitons accepter uniquement les images de largeur max 500px:

  $handle = new upload($_FILES['photoupload']);
  if ($handle->uploaded) {
      $handle->image_max_width = 500;
      $handle->Process("CHEMIN_ABSOLU_VERS_SITE/web/images/");
	if ($handle->processed) {
	   $handle->clean();
	   // Image uploadée avec succès !
	} else {
         echo $handle->error;
	  $handle->clean();
	}
  }

Si votre image dépasse les 500px de largeur, un message d'erreur s'affichera.

Si vous voulez voir tous les paramètres possibles, rendez-vous sur la documentation officielle de la classe.

5) Retour des messages dans notre uploader

Pour savoir si l'upload a réussi ou a échoué, c'est quand même plus pratique de le voir directement à partir de notre Uploader.

Il suffit de renvoyer un tableau JSON à partir de notre PHP pour indiquer l'état de l'upload et les erreurs éventuellement rencontrées:

  $result = array();
  $handle = new upload($_FILES['photoupload']);
  if ($handle->uploaded) {
      $handle->image_max_width = 500;
      $handle->Process("CHEMIN_ABSOLU_VERS_SITE/web/images/");
	if ($handle->processed) {
	   $handle->clean();
	   $result['result'] = 'success';
	   $result['size'] = utf8_encode("<strong>".$handle->file_dst_name."</strong> transféré (".$handle->image_src_x."x".$handle->image_src_y.")");
	} else {
         $result['result'] = 'failed';
	   $result['error'] = $handle->error;
	  $handle->clean();
	}
  }
if (!headers_sent() )
{
	header('Content-type: application/json');
}
echo json_encode($result);
exit();

Lorsque l'upload sera terminé, un message s'affichera sur notre uploader pour nous dire si l'upload a réussi ou échoué. Dans le dernier cas, l'erreur s'affichera.

6) Test de notre uploader !

Il est maintenant l'heure du test, accédez à votre index.php, cliquez sur le lien permettant l'ouverture de la popup Uploader, sélectionnez une image et envoyez !

Vérifiez que l'image soit bien arrivée dans le répertoire images/

Si cela ne fonctionne pas, vérifiez que vous ayez bien mis les droits en écriture sur vos répertoire images.

Sinon, copiez l'erreur retournée dans le topic dédié au tutorial sur le forum de la Ferme du Web.

Fin de la Deuxième partie du tutorial

Fin de notre deuxième étape, nous pouvons uploader nos images et elles sont bien redirigées dans le répertoire images.

Dans le prochain billet, nous verrons comment redimensionner nos images automatiquement pour qu'elles soient de taille optimale dans notre blog / site.

Et comme vous l'avez peut être vu dans le "Tutorial permettant de protéger les images de son site", il est intéressant d'ajouter un watermark à ses photos, nous verrons donc comment automatiser ce marquage lors de l'upload.

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).

Accéder aux autres parties du tutorial