Mostrar una vista previa de la imagen antes de cargarla

En mi formulario HTML tengo una entrada archivada 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?

Dec 28 '12 19:12 Hardik Sondagar

A continuación se muestra un ejemplo rápido que utiliza para URL.createObjectURLrepresentar una miniatura estableciendo el srcatributo de una etiqueta de imagen en la URL de un objeto:

El código html:

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

El código JavaScript:

document.getElementById('files').onchange = function () {
  var src = URL.createObjectURL(this.files[0])
  document.getElementById('image').src = src
}

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

Mostrar fragmento de código

function handleFileSelect (evt) {
  // Loop through the FileList and render image files as thumbnails.
  for (const file of evt.target.files) {
 
    // Render thumbnail.
    const span = document.createElement('span')
    const src = URL.createObjectURL(file)
    span.innerHTML = 
      `<img style="height: 75px; border: 1px solid #000; margin: 5px"` + 
      `src="${src}" title="${escape(file.name)}">`

    document.getElementById('list').insertBefore(span, null)
  }
}

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

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

Expand snippet

Dec 28 '2012 12:12 Kamyar Nazeri

Aquí lo hice con jQuery usando la API FileReader.

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, se procesará un archivo de imagen válido , luego verificará si el navegador admite la API FileReader y luego solo se procesará; de lo contrario, se mostrará 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");
     }
 });

Jul 27 '2015 15:07 Satinder singh

Mostrar fragmento de código

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>

Expand snippet

Aug 30 '2016 09:08 yogesh chatrola

Para imágenes de fondo, asegúrese de utilizarurl()

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

Feb 19 '2019 02:02 epicgear