Affichage de miniature jQuery

Un post rapide concernant un script permettant d’afficher une lors de l’ 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);
		}
	});
});

A voir aussi

  • agence web

    Ouf ! effectivement, c’est très impressionnant

  • Kirow

    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

    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.

Réseau

Sites