Upload de plusieurs images sans recharger la page avec jQuery et PHP

Voici comment créer un système d’upload d’image à la volée avec jQuery et php. Ce module vous donne la possibilité d’envoyer des images en ligne depuis votre ordinateur sans recharger la page.

Vous pouvez consulter la démonstration ici : Démo

Fichier HTML :

<div id="wrapAll">

			<div id='preview'>
			</div>

			<form id="uploadForm" method="post" enctype="multipart/form-data" action='ajaximage.php'>
				Sélectionner les images : 

				<div id='uploadStatus' style='display:none'><img src="loader.gif" alt="Uploading...."/></div>

				<div id='imgUploadBtn'>
					<input type="file" multiple="multiple" name="imgUpload[]" id="imgUpload" accept="image/*" />
				</div>
			</form>

	</div>

Code Javascript :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

	<script type="text/javascript" src="jquery.form.bassm.js"></script>

	<script type="text/javascript" >
	$(document).ready(function() { 

        $('#imgUpload').on('change', function(){ 

			$("#uploadForm").ajaxForm({
				target: '#preview', 
				//clearForm: true,
				resetForm: true,
			    beforeSubmit:function(){ 
					$("#uploadStatus").show();
					$("#imgUploadBtn").hide();
				}, 
				success:function(){ 
					$("#uploadStatus").hide();
					$("#imgUploadBtn").show();
				}, 
				error:function(){ 
					$("#uploadStatus").hide();
					$("#imgUploadBtn").show();
				} }).submit();

		});

	    }); 
	</script>

Fichier ajaximage.php :

<?php
//Répertoire ou seront placés les images
$pathTo 	= "uploads/";
$maxSize 	= '0.2'; //en Mo

// récupère l'extension du fichier
function getExtension($str)
{
	$i = strrpos($str,".");
	if (!$i)
	{
		return "";
	}
	$l = strlen($str) - $i;
	$ext = substr($str,$i+1,$l);
	$ext = strtolower($ext);
	return $ext;
}

function cleanFileName ($chaine, $extension)
{
	
	setlocale(LC_ALL, 'fr_FR');

	$chaine = iconv('UTF-8', 'ASCII//TRANSLIT//IGNORE', $chaine);

	$chaine = preg_replace('#[^0-9a-z]+#i', '-', $chaine);

	while(strpos($chaine, '--') !== false)
	{
		$chaine = str_replace('--', '-', $chaine);
	}

	$chaine = trim($chaine, '-');
	$chaine = strtolower($chaine);
	$chaine = preg_replace("@(-$extension)@", "", $chaine); //pour afficher l'extension
	return $chaine;
}

$valid_formats = array("jpg", "jpeg", "png", "gif", "bmp");

$valid_formats = array("image/gif", "image/jpeg", "image/pjpeg", "image/png", "image/bmp");


if(isset($_POST) AND $_SERVER['REQUEST_METHOD'] == "POST")
{
	$images = $_FILES['imgUpload']; 

	$count = count($images['name']);

	$msgError = $msgSuccess = '';
	$error = 0;
	$uploaded = 0;
	for ($i=0; $i < $count; $i++) 
	{ 
		# code...
		$type = $images['type'][$i];
		$name = $images['name'][$i];
		$size = $images['size'][$i];

		if(strlen($name))
		{
			$ext = getExtension($name);
			if(in_array($type,$valid_formats))
			{
				// Vérification de la taille de l'image
				if($size < (1024* (1024 * $maxSize)) ) 
				{
					$newImageUploaded = cleanFileName($name, $ext).'-'.time().'.'.$ext;
					$tmp = $images['tmp_name'][$i];
					if(move_uploaded_file($tmp, $pathTo.$newImageUploaded))
					{
						$msgSuccess .= "<img src='uploads/".$newImageUploaded."' class='preview'>";
						$uploaded = 1;
					}
					else
					{
						$error = 1;
						$msgError .=  "Erreur";	
					}
					
				}
				else
				{
					$error = 1;
					$msgError .=  "L'image ne doit pas dépasser la taille de ". 1000 * $maxSize ."Ko"; 
				}
			}
			else
			{
				$error = 1;
				$msgError .=  "Format de fichier invalide ...\n"; 
			}
		}
	}
	if ($uploaded == 1)
	{
		echo $msgSuccess;
	}
	else if ($uploaded == 0 && $error == 1)
	{
		echo $msgError;
	}
	else {
		//echo $msgSuccess;
	}

	exit();
}
?>

Fichier CSS :

#wrapAll { width: 1000px; margin: 0 auto;}

#preview img { max-width: 150px; max-height: 150px; padding: 5px; margin: 5px; border: 1px solid #e1e1e1; }

Bien entendu ce script peut être amélioré en ajoutant une interaction avec une table user pour ajouter une photo de profil par exemple.

A noter que si vous utilisez une version de jQuery antérieure à 1.9 vous pouvez remplacer .on() par .live()

//$('#imgUpload').on('change', function(){ 

$('#imgUpload').live('change', function(){

Si vous souhaitez ajouter les images une par une voici ce qu’il faut changer dans le code javascript

<!--<input type="file" multiple="multiple" name="imgUpload[]" id="imgUpload" accept="image/*" />-->

<input type="file" name="imgUpload[]" id="imgUpload" accept="image/*" />

Vous pouvez consulter la démonstration ici : Démo