html5 - subir - Mostrar una vista previa de imagen antes de cargar

subir archivos jquery

Question

En mi formulario HTML, he ingresado la entrada con el tipo de archivo, 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?

Answer 1

Aquí lo hice con jQuery usando FileReader API.

Marcado Html:

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

jQuery:

Aquí, en código jQuery, primero verifico la extensión del archivo. es decir, un archivo de imagen válido para ser procesado, luego se verificará si la API de FileReader compatible con el navegador es sí, entonces solo se procesará, de lo contrario, mostrará un 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 subirla, jQuery, HTML5 FileReader () con demostración en vivo

Answer 2

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

Aquí hay un ejemplo rápido que hace uso de la clase FileReader para leer una imagen como DataURL y renderiza una miniatura configurando el atributo src 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 de 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 File APIs en JavaScript .

El fragmento de código en el siguiente ejemplo HTML filtra las imágenes de la selección del usuario y convierte los archivos seleccionados en varias 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>

Answer 3

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>