Mostra un'anteprima dell'immagine prima del caricamento

Nel mio modulo HTML ho inserito un file di tipo file, ad esempio:

 <input type="file" multiple>

Quindi seleziono più file facendo clic sul pulsante di input. Ora voglio mostrare l'anteprima delle immagini selezionate prima di inviare il modulo. Come farlo in HTML 5?

HTML5 viene fornito con le specifiche File API , che consentono di creare applicazioni che consentono all'utente di interagire con i file localmente; Ciò significa che puoi caricare i file e visualizzarli nel browser senza dover effettivamente caricare i file. Parte dell'API File è l' interfaccia FileReader che consente alle applicazioni Web di leggere in modo asincrono i contenuti dei file.

Ecco un rapido esempio che utilizza la FileReaderclasse per leggere un'immagine come DataURL e renderizza una miniatura impostando l' srcattributo di un tag immagine su un URL di dati:

Il codice html:

<input type="file" id="files" />
<img id="image" />

Il codice JavaScript:

document.getElementById("files").onchange = function () {
    var reader = new FileReader();

    reader.onload = function (e) {
        // get loaded data and render thumbnail.
        document.getElementById("image").src = e.target.result;
    };

    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
};

Ecco un buon articolo sull'utilizzo delle API dei file in JavaScript .

Lo snippet di codice nell'esempio HTML seguente filtra le immagini dalla selezione dell'utente e visualizza i file selezionati in più anteprime di miniature:

function handleFileSelect(evt) {
    var files = evt.target.files;

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = 
          [
            '<img style="height: 75px; border: 1px solid #000; margin: 5px" src="', 
            e.target.result,
            '" title="', escape(theFile.name), 
            '"/>'
          ].join('');
          
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);

<input type="file" id="files" multiple />
<output id="list"></output>

Qui ho fatto con jQuery utilizzando FileReader API.

Markup HTML:

<input id="fileUpload" type="file" multiple />
<div id="image-holder"></div>

jQuery:

Qui nel codice jQuery, per prima cosa controllo l'estensione del file. vale a dire un file immagine valido da elaborare, quindi controllerà se il supporto del browser FileReader API è sì, quindi solo elaborato altrimenti visualizza il messaggio rispettato

$("#fileUpload").on('change', function () {

     //Get count of selected files
     var countFiles = $(this)[0].files.length;

     var imgPath = $(this)[0].value;
     var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
     var image_holder = $("#image-holder");
     image_holder.empty();

     if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
         if (typeof (FileReader) != "undefined") {

             //loop for each file selected for uploaded.
             for (var i = 0; i < countFiles; i++) {

                 var reader = new FileReader();
                 reader.onload = function (e) {
                     $("<img />", {
                         "src": e.target.result,
                             "class": "thumb-image"
                     }).appendTo(image_holder);
                 }

                 image_holder.show();
                 reader.readAsDataURL($(this)[0].files[i]);
             }

         } else {
             alert("This browser does not support FileReader.");
         }
     } else {
         alert("Pls select only images");
     }
 });

Articolo dettagliato: come visualizzare in anteprima l'immagine prima di caricarla, jQuery, HTML5 FileReader () con Live Demo

Per le immagini di sfondo, assicurati di usare url()

node.backgroundImage = 'url(' + e.target.result + ')';