Uploader une photo avec Html5 et jquery

Introduction:

Je  conserve ici des modèles de codes JQUERY qui reviennent souvent dans les programmes.

Sommaire:

1. Uploader une Photo dynamiquement avec Jquery et HTML5 et Php sans rechargement de page.

Détail:

1. Uploader une Photo avec Jquery et HTML5

(Note : l’indentation n’est pas reprise par WordPress, tant pis, pas le temps de la refaire.)

 

Etape 1 : Créer le Button d’upload de fichier HTML avec un id.Dans ce cas,  je lui ai mis l’id photo.


Modifier la Photo :
 
<input class="right" type="file" value="" name="photo"    id="photo"  onchange=""/>

Etape 2 : Intégrer cette function Javascript JQUERY qui permet de contrôler la taille et le nom de la photo, et de récupérer ces variables. Dans cet example, la photo est uploadée sur le serveur dès que l’on clique sur le bouton “Browse », à l’aide de la fonction Ajax de Jquery :


$("#photo").change(function(){
	// Récupération des données de la photo après clic sur UPLOAD
		var file = this.files[0];
		var name = file.name;
		var size = file.size;
		var type = file.type;
 
	//Validation JS (Bien dautres choses sont possibles...)
		alert("Taille du fichier : "+file.size+" Octets");
 
	// Renommage.
		var data = new FormData();
		jQuery.each($("#photo")[0].files, function(i, file) {
			data.append('file-'+i, file);
		});
 
	// Envoi de la photo sur le serveur avec Jquery Ajax
		$.ajax({
			url: 'upload.php',  //Le fichier qui va traiter les données de la photo et l'uploader(envoi)
			type: 'POST',		// Format d'envoi
			data: data,			L'objet data a été défini juste au dessus.
			//Options to tell jQuery not to process data or worry about content-type. Permet de ne pas se soucier du format.
			cache: false,
			contentType: false,
			processData: false
		});
 
	 // Exemple de mise à jour de la photo en live, sans rechargement de page, avec jquery.
		$("#imagejo").empty(); // Facultatif
		$("#imagejo").append('<img src="images/'+name+'" title="" height=100px width=100px style="border-radius: 10px" >'); // Facultattif, permet de remplacer l'image par l'image uploadée sur le serveur dans la div imagejo	 
});
 

ETAPE 3 : Ce fichier PHP est celui qui gère la photo qui arrive sur le serveur par le biais de la fonction AJAX de JQUERY, il peut effectuer des contrôles supplémentaires de sécurité.

 


<?php
 
// Dans les versions de PHP antiéreures à 4.1.0, la variable $HTTP_POST_FILES
// doit être utilisée à la place de la variable $_FILES.
 
	$allowed_filetypes = array('.jpg','.gif','.bmp','.png');
	$max_filesize = 1000000;
	$filename = $_FILES['file-0']['name']; // Get the name of the file (including file extension).
	 
// Get l'extension du nom de fichier.
	$ext = substr($filename, strpos($filename,'.'), strlen($filename)-1);
	 
// Check si le format de fichier est autorisé, sinon DIE et informer l'utilisateur.
	if(!in_array($ext,$allowed_filetypes))
	die('Message');

// Choix du répertoire de destination	
	$uploaddir = 'images/';
	$uploadfile = $uploaddir . basename($_FILES['file-0']['name']);
	
echo '<pre>';
 
	if (move_uploaded_file($_FILES['file-0']['tmp_name'], $uploadfile)) {
		echo "Le fichier est valide, et a été téléchargé avec succès. Voici plus d'informations :\n";
		chmod("images/".$filename."", 0775);  //ok marche
	}
 
	else {
		echo "Attaque potentielle par téléchargement de fichiers. Voici plus d'informations :\n";
	}
 
echo 'Voici quelques informations de débogage :';
 
print_r($_FILES);
 
echo '</pre>';
 
?>
Publicités