Mostrar una vista previa de la imagen antes de subirla

En mi formulario HTML, he ingresado con un archivo de tipo, por ejemplo:

 <input type="file" multiple>

Luego, selecciono varios archivos haciendo clic en ese botón de entrada. Ahora quiero mostrar una vista previa de las imágenes seleccionadas antes de enviar el formulario. ¿Cómo hacer eso en HTML 5?

HTML5 viene con la especificación File API , que le permite crear aplicaciones que permiten al usuario interactuar con archivos localmente; Eso significa que puede cargar archivos y representarlos en el navegador sin tener que cargarlos. Parte de la API de archivos es la interfaz FileReader , que permite que las aplicaciones web lean de forma asincrónica el contenido de los archivos.

Aquí hay un ejemplo rápido que hace uso de la FileReaderclase para leer una imagen como DataURL y renderiza una miniatura estableciendo el srcatributo de una etiqueta de imagen en una URL de datos:

El código html:

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

El código 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]);
};

Aquí hay un buen artículo sobre el uso de las API de archivos en JavaScript .

El fragmento de código en el ejemplo HTML a continuación filtra las imágenes de la selección del usuario y procesa los archivos seleccionados en múltiples vistas previas en miniatura:

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>

Aquí lo hice con jQuery usando FileReader API.

Marcado HTML:

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

jQuery:

Aquí, en el código jQuery, primero verifico la extensión del archivo. es decir, un archivo de imagen válido para ser procesado, luego verificará si la API de FileReader compatible con el navegador es sí, luego solo se procesa; de lo contrario, se muestra el mensaje respetado

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

Artículo detallado: Cómo obtener una vista previa de la imagen antes de cargarla, jQuery, HTML5 FileReader () con demostración en vivo

Para las imágenes de fondo, asegúrese de utilizar url()

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