31 Mar

Aperçu d’upload d’une image

dans Web

Après avoir sélectionner une image dans un champs file, l’utilisateur apprécie avoir un aperçu de son image avant de la poster. Cette fonction permet d’afficher un aperçu dans une balise <img>.

$("input[data-preview]").change(function() {
	var $input = $(this);
	var fileReader = new FileReader();
	fileReader.readAsDataURL(this.files[0]);
	fileReader.onload = function(fileEvent) {
		$($input.data('preview')).attr('src', fileEvent.target.result);
	};
});

$("input[data-preview]").change(function() {

var $input = $(this);

var fileReader = new FileReader();

fileReader.readAsDataURL(this.files[0]);

fileReader.onload = function(fileEvent) {

$($input.data('preview')).attr('src', fileEvent.target.result);

};

});

Ensuite, sur votre champs file, ajoutez un attribut data-preview avec comme valeur un sélecteur vers la balise <img> , ça peut être .preview pour <img class="preview"/> .

Voici un jsfiddle pour tester ça.

Tags:

javascript,jquery,upload

Aperçu d’upload d’une image

Tags:

Florent

Aucun commentaire

Commenter Cancel Reply

Articles récents