Caricare immagini con anteprima

Ognuno di noi, almeno una volta, avrà effettuato un upload di un’immagine.
Il problema più grosso è che una volta selezionata l’immagine, prima dell’invio non riusciamo più ad avere informazioni su quello che abbiamo caricato.

ZURB ci viene in aiuto con questo semplice tutorial che utilizza jQuery ed il plugin AJAX Upload per elaborare l’immagine lato server e mostrane una miniatura in anteprima prima di effettuare l’invio.

Lo script è molto semplice:

$(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);
      }
   });
});

e deve essere applicato ad un form di questo tipo:

<div class="seven columns">
   <div class="preview">
      <img id="thumb" width="96px" height="96px" src="upload.png" />
   </div>
   <div class="wrap hotness">
      <form id="newHotnessForm" action="images_upload.html">
         <label>Upload a Picture of Yourself</label>
         <input type="file" id="imageUpload" size="20" />
         <button type="submit" class="button" disabled="disabled">Save</button>
      </form>
   </div>
</div>

Il tutorial è disponibile qui.