Vai al contenuto
jQuery Italia
jQuery Italia

La community italiana di jQuery

  • IMPARA
    • Tutorials jQuery Italia
    • Tutorials dal web
    • Supporto ed Aiuto
  • CONTRIBUISCI
    • Nuovo Articolo
    • Nuovo Tutorial
  • SVILUPPA
    • Snippets
    • Tools
    • Download
    • Plugins
    • Links
  • FORUM
    • Reception
    • Supporto ed Aiuto
    • jQuery News
    • Non solo jQuery
  • NOTIZIE
    • jQuery
    • jQuery UI
    • Projects
  • CONTATTI
  • LOGIN

Caricare immagini con anteprima

Pubblicato il 27 Marzo 201016 Novembre 2016 Categoria:
  • Tutorials dal web

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.

0 Condivisioni
Share
Tweet
Share
Pin

Login

Accedi con Facebook
Accedi con Google
Accedi con Twitter
  • Registrati
  • Password dimenticata?

SOSTIENI jQuery Italia

Aiuta la Community di jQuery Italia a rimanere in vita per contribuire a diffondere le conoscenze di base ed avanzate di jQuery.

Download in evidenza

  • gmap104.html (3115 download)
  • jquery-1.4.1.min.js (2907 download)
  • tinytips11.html (2792 download)
  • jquery-ui-1.8rc1.zip (2780 download)
  • jqueryformwizard-201.html (2760 download)
  • 1.0.0.zip (2724 download)
  • jquery-1.4.2.min.js (2653 download)
  • calendarPicker.html (2651 download)
  • move-background.html (2621 download)
  • jquerytools120.html (2619 download)

jQuery Links

  • jQuery Howto
  • jQuery Official Site
  • jQuery UI Official Site
  • Learning jQuery
  • Use jQuery

SITO SEGNALATO SU

Sito segnalato da Freeonline.it - La guida alle risorse gratuite Mooseek.com - Web Directory, Download Software, Giochi Online, Video Tecnologici, Siti d'Affari

TAG

aggiornamento (3) ajax (5) Android (5) animazione (49) api (10) BlackBerry (4) calendario (3) canvas (4) css3 (9) form (12) framework (41) gallery (8) google (5) grafici (2) html5 (11) immagini (38) javascript (29) jQuery (160) jQuery UI (15) Linux Day (3) maps (3) menu (6) mobile (10) news (2) open source (4) overlay (3) plugin (93) Plugins (17) presentation cycle (4) projects (11) responsive (5) slider (7) slideshow (18) Smartphones (5) Tablets (4) template (5) testo (2) tooltip (6) tutorial (12) upload (3) utility (18) VELug (3) video (3) widget (3) zoom (3)
jQuery Italia

La community italiana di jQuery

  • Facebook
  • Twitter
  • Linkedin
  • Youtube
Tutti i loghi ed i marchi contenuti e citati in questo sito sono dei rispettivi propietari.
Privacy Policy
Cookies Policy
COPYRIGHT © 2010 - 2021 jQuery Italia
Designed By ZeeTheme