Affichage de miniature jQuery

Un post rapide concernant un script jQuery permettant d’afficher une miniature lors de l’upload d’images.

Le problème lors de l’utilisation d’un formulaire d’upload classique est que l’on ne voit pas le fichier uploader.
Pour remédier à cela on peut utiliser un peu de Javascript afin d’afficher une miniature dès l’upload et vérifier ainsi son choix d’image.

Voici donc la solution à l’aide de Jquery:
Installation et Démo : http://www.zurb.com/playground/ajax_upload
Licence: MIT Licence

<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/ajaxupload.js" type="text/javascript"></script>
$(document).ready(function(){

	var thumb = $('img#thumb');	

	new AjaxUpload('imageUpload', {
		action: $('form#newHotnessForm').attr('action'),
		name: 'image',
		onSubmit: function(file, extension) {
			$('div.preview').addClass('loading');
		},
		onComplete: function(file, response) {
			thumb.load(function(){
				$('div.preview').removeClass('loading');
				thumb.unbind();
			});
			thumb.attr('src', response);
		}
	});
});
BlogBang

A voir aussi

3 Responses to "Affichage de miniature jQuery"

  • agence web 07:26 16/3/2010

    Ouf ! effectivement, c’est très impressionnant

  • Kirow 02:09 01/4/2010

    Bonsoir,

    Personnellement j’ai pas reussi à mettre en place ce script, si quelqu’un pouvait m’aider ca serait volontier, le script m’interesse fortement !

    Merci à vous

  • TDR 02:29 10/8/2010

    Bonsoir,
    Pareil que Kirow, je trouve ce script super en soi mais il ne marche pas non plus chez moi…
    J’ai fais pas mal d’essais mais rien n’y fais… je n’arrive toujours pas à afficher l’image que je viens d’envoyer.

    Si vous avez l’astuce merci de partager vos sources.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>