Vista previa de una imagen antes de que se cargue


1616

Quiero poder obtener una vista previa de un archivo (imagen) antes de que se cargue. La acción de vista previa debe ejecutarse todo en el navegador sin usar Ajax para cargar la imagen.

¿Cómo puedo hacer esto?


Tenga en cuenta que a menos que use Gears u otro complemento, no podrá manipular la imagen dentro del navegador: code.google.com/p/chromium/issues/detail?id=32276
Steve-o

Vea este enfoque de JavaScript puro, incluida su respuesta y el comentario de Ray Nicholus para la solución final: stackoverflow.com/questions/16430016/…
Jonathan Root

Aquí hay un buen artículo detallado con demostración en vivo codepedia.info/2015/06/…
Satinder singh

8
Aquí hay una solución simple que no usa jquery: developer.mozilla.org/en-US/docs/Web/API/FileReader/…
John Gilmer

Respuestas:


2537

Eche un vistazo al código de muestra a continuación:

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    
    reader.onload = function(e) {
      $('#blah').attr('src', e.target.result);
    }
    
    reader.readAsDataURL(input.files[0]); // convert to base64 string
  }
}

$("#imgInp").change(function() {
  readURL(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form runat="server">
  <input type='file' id="imgInp" />
  <img id="blah" src="#" alt="your image" />
</form>

Además, puedes probar esta muestra aquí .


55
Puede mejorar un poco el rendimiento definiendo el lector una vez. jsfiddle.net/LvsYc/638
Jaider

84
¿Por qué usar jQuery para `$ ('# blah'). Attr ('src', e.target.result);` cuando podría simplemente haberlo hecho?document.getElementById('blah').src=e.target.result)
EasyBB

44
Hice una implementación ReactJS de esto . Funciona de maravilla. @kxc debe hacer una llamada ajax y enviarla input.files[0]como datos, consulte el documento de jQuery .
Sumi Straessle

@IvanBaev input.files[0]no tiene la ruta completa. ¿Cómo ubica FileReader el archivo?
Old Geezer

44
No importa, siempre que no puedas usar jquery ya que está hinchado y la vainilla te dará resultados más rápidos, especialmente si tienes toneladas de scripts.
EasyBB

357

Hay un par de formas en que puedes hacer esto. La forma más eficiente sería usar URL.createObjectURL () en el archivo desde su <input> . Pase esta URL a img.src para indicarle al navegador que cargue la imagen proporcionada.

Aquí hay un ejemplo:

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
<script>
  var loadFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
    output.onload = function() {
      URL.revokeObjectURL(output.src) // free memory
    }
  };
</script>

También puede usar FileReader.readAsDataURL () para analizar el archivo desde su <input>. Esto creará una cadena en la memoria que contiene una representación base64 de la imagen.

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
<script>
  var loadFile = function(event) {
    var reader = new FileReader();
    reader.onload = function(){
      var output = document.getElementById('output');
      output.src = reader.result;
    };
    reader.readAsDataURL(event.target.files[0]);
  };
</script>


40
Lea atentamente: readAsDataURL y createObjectURL almacenará en caché una imagen en el navegador, luego devolverá una cadena codificada en base64 que hace referencia a la ubicación de la imagen en caché. Si se borra la memoria caché del navegador, la cadena codificada en base64 ya no hará referencia a la imagen. La cadena base64 no son datos de imagen reales, es una referencia de URL a la imagen, y no debe guardarla en una base de datos con la esperanza de recuperar datos de imagen. Recientemente cometí este error (hace unos 3 minutos).
tfmontague

99
para evitar problemas de memoria, debe llamar URL.revokeObjectURLcuando haya terminado con su blob
Apolo

@Apolo no en este caso, mira esta respuesta: stackoverflow.com/a/49346614/2313004
grreeenn

Probar su solución ... gracias
Ajay Kumar

219

Solución de una línea:

El siguiente código usa URL de objeto, que es mucho más eficiente que la URL de datos para ver imágenes grandes (una URL de datos es una cadena enorme que contiene todos los datos del archivo, mientras que una URL de objeto, es solo una cadena corta que hace referencia a los datos del archivo memoria):

<img id="blah" alt="your image" width="100" height="100" />

<input type="file" 
    onchange="document.getElementById('blah').src = window.URL.createObjectURL(this.files[0])">

La URL generada será como:

blob:http%3A//localhost/7514bc74-65d4-4cf0-a0df-3de016824345

2
@Raptor y también lo es toda la API de archivos ... ( FileReader, input.filesetc.) URL.createObjectURLes el camino a seguir cuando se trata de archivos enviados por el usuario, solo crea un enlace simbólico en memoria al archivo real en el disco del usuario.
Kaiido

@cnlevy ¿Cómo podemos acceder a los archivos cargados? ¿Solo es posible obtenerlo de la URL como mencionaste? Para ser específicos, estoy usando un matraz que ya admite el acceso de los archivos cargados. ¿Hay alguna otra manera con este one-liner?
Abhishek Singh

esta es la mejor respuesta siempre
Navid Farjad

Esta solución no me funcionó. La vista previa de la imagen no se muestra.
Sundaramoorthy J

¡La mejor respuesta! Gracias
A7madev

46

La respuesta de LeassTaTT funciona bien en navegadores "estándar" como FF y Chrome. La solución para IE existe pero se ve diferente. Aquí la descripción de la solución de navegador cruzado:

En HTML necesitamos dos elementos de vista previa, imgpara navegadores estándar y divpara IE

HTML:

<img id="preview" 
     src="" 
     alt="" 
     style="display:none; max-width: 160px; max-height: 120px; border: none;"/>

<div id="preview_ie"></div>

En CSS especificamos la siguiente cosa específica de IE:

CSS:

#preview_ie {
  FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)
}  

En HTML incluimos el estándar y los javascripts específicos de IE:

<script type="text/javascript">
  {% include "pic_preview.js" %}
</script>  
<!--[if gte IE 7]> 
<script type="text/javascript">
  {% include "pic_preview_ie.js" %}
</script>

El pic_preview.jses el Javascript de la respuesta de LeassTaTT. Reemplace el $('#blah')con el $('#preview')y agregue el$('#preview').show()

Ahora el Javascript específico de IE (pic_preview_ie.js):

function readURL (imgFile) {    
  var newPreview = document.getElementById('preview_ie');
  newPreview.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgFile.value;
  newPreview.style.width = '160px';
  newPreview.style.height = '120px';
}    

Esto es. Funciona en IE7, IE8, FF y Chrome. Por favor, pruebe en IE9 e informe. La idea de la vista previa de IE se encontró aquí: http://forums.asp.net/t/1320559.aspx

http://msdn.microsoft.com/en-us/library/ms532969(v=vs.85).aspx


24

He editado la respuesta de @ Ivan para mostrar la imagen "No hay vista previa disponible", si no es una imagen:

function readURL(input) {
    var url = input.value;
    var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
    if (input.files && input.files[0]&& (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('.imagepreview').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }else{
         $('.imagepreview').attr('src', '/assets/no_preview.png');
    }
}

19

Aquí hay una versión de múltiples archivos , basada en la respuesta de Ivan Baev.

El HTML

<input type="file" multiple id="gallery-photo-add">
<div class="gallery"></div>

JavaScript / jQuery

$(function() {
    // Multiple images preview in browser
    var imagesPreview = function(input, placeToInsertImagePreview) {

        if (input.files) {
            var filesAmount = input.files.length;

            for (i = 0; i < filesAmount; i++) {
                var reader = new FileReader();

                reader.onload = function(event) {
                    $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                }

                reader.readAsDataURL(input.files[i]);
            }
        }

    };

    $('#gallery-photo-add').on('change', function() {
        imagesPreview(this, 'div.gallery');
    });
});

Requiere jQuery 1.8 debido al uso de $ .parseHTML, que debería ayudar con la mitigación de XSS.

Esto funcionará de inmediato, y la única dependencia que necesita es jQuery.


16

Si. Es posible.

HTML

<input type="file" accept="image/*"  onchange="showMyImage(this)" />
 <br/>
<img id="thumbnil" style="width:20%; margin-top:10px;"  src="" alt="image"/>

JS

 function showMyImage(fileInput) {
        var files = fileInput.files;
        for (var i = 0; i < files.length; i++) {           
            var file = files[i];
            var imageType = /image.*/;     
            if (!file.type.match(imageType)) {
                continue;
            }           
            var img=document.getElementById("thumbnil");            
            img.file = file;    
            var reader = new FileReader();
            reader.onload = (function(aImg) { 
                return function(e) { 
                    aImg.src = e.target.result; 
                }; 
            })(img);
            reader.readAsDataURL(file);
        }    
    }

Puede obtener una demostración en vivo desde aquí.


11

JSfiddle limpio y simple

Esto será útil cuando desee que el evento se active indirectamente desde un div o un botón.

<img id="image-preview"  style="height:100px; width:100px;"  src="" >

<input style="display:none" id="input-image-hidden" onchange="document.getElementById('image-preview').src = window.URL.createObjectURL(this.files[0])" type="file" accept="image/jpeg, image/png">

<button  onclick="HandleBrowseClick('input-image-hidden');" >UPLOAD IMAGE</button>


<script type="text/javascript">
function HandleBrowseClick(hidden_input_image)
{
    var fileinputElement = document.getElementById(hidden_input_image);
    fileinputElement.click();
}     
</script>

Solo una nota: no puedo tomar el crédito por esto, pero puede usar <label>y evitar JavaScript para manejar el clic del botón por completo. Activar entrada de archivo con HTML / CSS puro. , y no es hacky en absoluto.
Regular Joe

7

Ejemplo con múltiples imágenes usando JavaScript (jQuery) y HTML5

JavaScript (jQuery)

function readURL(input) {
     for(var i =0; i< input.files.length; i++){
         if (input.files[i]) {
            var reader = new FileReader();

            reader.onload = function (e) {
               var img = $('<img id="dynamic">');
               img.attr('src', e.target.result);
               img.appendTo('#form1');  
            }
            reader.readAsDataURL(input.files[i]);
           }
        }
    }

    $("#imgUpload").change(function(){
        readURL(this);
    });
}

Marcado (HTML)

<form id="form1" runat="server">
    <input type="file" id="imgUpload" multiple/>
</form>

5

¿Qué tal crear una función que cargue el archivo y active un evento personalizado? Luego adjunte un oyente a la entrada. De esta manera, tenemos más flexibilidad para usar el archivo, no solo para obtener una vista previa de las imágenes.

/**
 * @param {domElement} input - The input element
 * @param {string} typeData - The type of data to be return in the event object. 
 */
function loadFileFromInput(input,typeData) {
    var reader,
        fileLoadedEvent,
        files = input.files;

    if (files && files[0]) {
        reader = new FileReader();

        reader.onload = function (e) {
            fileLoadedEvent = new CustomEvent('fileLoaded',{
                detail:{
                    data:reader.result,
                    file:files[0]  
                },
                bubbles:true,
                cancelable:true
            });
            input.dispatchEvent(fileLoadedEvent);
        }
        switch(typeData) {
            case 'arraybuffer':
                reader.readAsArrayBuffer(files[0]);
                break;
            case 'dataurl':
                reader.readAsDataURL(files[0]);
                break;
            case 'binarystring':
                reader.readAsBinaryString(files[0]);
                break;
            case 'text':
                reader.readAsText(files[0]);
                break;
        }
    }
}
function fileHandler (e) {
    var data = e.detail.data,
        fileInfo = e.detail.file;

    img.src = data;
}
var input = document.getElementById('inputId'),
    img = document.getElementById('imgId');

input.onchange = function (e) {
    loadFileFromInput(e.target,'dataurl');
};

input.addEventListener('fileLoaded',fileHandler)

Probablemente mi código no sea tan bueno como el de algunos usuarios, pero creo que lo entenderás. Aquí puedes ver un ejemplo


5

El siguiente es el código de trabajo.

<input type='file' onchange="readURL(this);" /> 
<img id="ShowImage" src="#" />

Javascript:

 function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#ShowImage')
                    .attr('src', e.target.result)
                    .width(150)
                    .height(200);
            };

            reader.readAsDataURL(input.files[0]);
        }
    }

4

En React, si el archivo está en tus accesorios, puedes usar:

{props.value instanceof File && (
    <img src={URL.createObjectURL(props.value)}/>
)}

1
Esto me salvó la vida! Mucho más simple que la solución React usando FileReader
Jonathan

2

¿Qué hay de esta solución?

Simplemente agregue el atributo de datos "tipo de datos = editable" a una etiqueta de imagen como esta:

<img data-type="editable" id="companyLogo" src="http://www.coventrywebgraphicdesign.co.uk/wp-content/uploads/logo-here.jpg" height="300px" width="300px" />

Y el guión de su proyecto, por supuesto ...

function init() {
    $("img[data-type=editable]").each(function (i, e) {
        var _inputFile = $('<input/>')
            .attr('type', 'file')
            .attr('hidden', 'hidden')
            .attr('onchange', 'readImage()')
            .attr('data-image-placeholder', e.id);

        $(e.parentElement).append(_inputFile);

        $(e).on("click", _inputFile, triggerClick);
    });
}

function triggerClick(e) {
    e.data.click();
}

Element.prototype.readImage = function () {
    var _inputFile = this;
    if (_inputFile && _inputFile.files && _inputFile.files[0]) {
        var _fileReader = new FileReader();
        _fileReader.onload = function (e) {
            var _imagePlaceholder = _inputFile.attributes.getNamedItem("data-image-placeholder").value;
            var _img = $("#" + _imagePlaceholder);
            _img.attr("src", e.target.result);
        };
        _fileReader.readAsDataURL(_inputFile.files[0]);
    }
};

// 
// IIFE - Immediately Invoked Function Expression
// /programming/18307078/jquery-best-practises-in-case-of-document-ready
(

function (yourcode) {
    "use strict";
    // The global jQuery object is passed as a parameter
    yourcode(window.jQuery, window, document);
}(

function ($, window, document) {
    "use strict";
    // The $ is now locally scoped 
    $(function () {
        // The DOM is ready!
        init();
    });

    // The rest of your code goes here!
}));

Ver demostración en JSFiddle


2

Prueba esto

window.onload = function() {
  if (window.File && window.FileList && window.FileReader) {
    var filesInput = document.getElementById("uploadImage");
    filesInput.addEventListener("change", function(event) {
      var files = event.target.files;
      var output = document.getElementById("result");
      for (var i = 0; i < files.length; i++) {
        var file = files[i];
        if (!file.type.match('image'))
          continue;
        var picReader = new FileReader();
        picReader.addEventListener("load", function(event) {
          var picFile = event.target;
          var div = document.createElement("div");
          div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +
            "title='" + picFile.name + "'/>";
          output.insertBefore(div, null);
        });        
        picReader.readAsDataURL(file);
      }

    });
  }
}
<input type="file" id="uploadImage" name="termek_file" class="file_input" multiple/>
<div id="result" class="uploadPreview">


2

¿Vista previa de varias imágenes antes de que se cargue usando jQuery / javascript?

Esto previsualizará múltiples archivos como imágenes en miniatura a la vez

HTML

<input id="ImageMedias" multiple="multiple" name="ImageMedias" type="file"
accept=".jfif,.jpg,.jpeg,.png,.gif" class="custom-file-input"  value="">                                    
<div id="divImageMediaPreview"></div>

Guión

$("#ImageMedias").change(function () {
    if (typeof (FileReader) != "undefined") {
        var dvPreview = $("#divImageMediaPreview");
        dvPreview.html("");            
        $($(this)[0].files).each(function () {
            var file = $(this);                
                var reader = new FileReader();
                reader.onload = function (e) {
                    var img = $("<img />");
                    img.attr("style", "width: 150px; height:100px; padding: 10px");
                    img.attr("src", e.target.result);
                    dvPreview.append(img);
                }
                reader.readAsDataURL(file[0]);                
        });
    } else {
        alert("This browser does not support HTML5 FileReader.");
    }
});

Demostración de trabajo en Codepen

Demostración de trabajo en jsfiddle

Espero que esto sea de ayuda.


1

He creado un complemento que puede generar el efecto de vista previa en IE 7+ gracias a Internet, pero tiene pocas limitaciones. Lo puse en una página de Github para que sea más fácil obtenerlo

$(function () {
		$("input[name=file1]").previewimage({
			div: ".preview",
			imgwidth: 180,
			imgheight: 120
		});
		$("input[name=file2]").previewimage({
			div: ".preview2",
			imgwidth: 90,
			imgheight: 90
		});
	});
.preview > div {
  display: inline-block;
  text-align:center;
}

.preview2 > div {
  display: inline-block; 
  text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://rawgit.com/andrewng330/PreviewImage/master/preview.image.min.js"></script>
	Preview
	<div class="preview"></div>
	Preview2
	<div class="preview2"></div>

	<form action="#" method="POST" enctype="multipart/form-data">
		<input type="file" name="file1">
		<input type="file" name="file2">
		<input type="submit">
	</form>


1

Para la carga de múltiples imágenes (modificación de la solución de @ IvanBaev)

function readURL(input) {
    if (input.files && input.files[0]) {
        var i;
        for (i = 0; i < input.files.length; ++i) {
          var reader = new FileReader();
          reader.onload = function (e) {
              $('#form1').append('<img src="'+e.target.result+'">');
          }
          reader.readAsDataURL(input.files[i]);
        }
    }
}

http://jsfiddle.net/LvsYc/12330/

Espero que esto ayude a alguien.


1

Es mi código. Admite IE [6-9] 、 Chrome 17 + 、 Firefox 、 Opera 11 + 、 Maxthon3

   
function previewImage(fileObj, imgPreviewId) {
    var allowExtention = ".jpg,.bmp,.gif,.png";  //allowed to upload file type
    document.getElementById("hfAllowPicSuffix").value;
    var extention = fileObj.value.substring(fileObj.value.lastIndexOf(".") + 1).toLowerCase();
    var browserVersion = window.navigator.userAgent.toUpperCase();
    if (allowExtention.indexOf(extention) > -1) {
        if (fileObj.files) {
            if (window.FileReader) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    document.getElementById(imgPreviewId).setAttribute("src", e.target.result);
                };
                reader.readAsDataURL(fileObj.files[0]);
            } else if (browserVersion.indexOf("SAFARI") > -1) {
                alert("don't support  Safari6.0 below broswer");
            }
        } else if (browserVersion.indexOf("MSIE") > -1) {
            if (browserVersion.indexOf("MSIE 6") > -1) {//ie6
                document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
            } else {//ie[7-9]
                fileObj.select();
                fileObj.blur(); 
                var newPreview = document.getElementById(imgPreviewId);

                newPreview.style.border = "solid 1px #eeeeee";
                newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";
                newPreview.style.display = "block";

            }
        } else if (browserVersion.indexOf("FIREFOX") > -1) {//firefox
            var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
            if (firefoxVersion < 7) {//firefox7 below
                document.getElementById(imgPreviewId).setAttribute("src", fileObj.files[0].getAsDataURL());
            } else {//firefox7.0+ 
                document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(fileObj.files[0]));
            }
        } else {
            document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
        }
    } else {
        alert("only support" + allowExtention + "suffix");
        fileObj.value = ""; //clear Selected file
        if (browserVersion.indexOf("MSIE") > -1) {
            fileObj.select();
            document.selection.clear();
        }

    }
}
function changeFile(elem) {
    //file object , preview img tag id
    previewImage(elem,'imagePreview')
}
<input type="file"  id="netBarBig"  onchange="changeFile(this)"  />
<img  src="" id="imagePreview" style="width:120px;height:80px;" alt=""/>


1

Iamge predeterminado

                @Html.TextBoxFor(x => x.productModels.DefaultImage, new {@type = "file", @class = "form-control", onchange = "openFile(event)", @name = "DefaultImage", @id = "DefaultImage" })
                @Html.ValidationMessageFor(model => model.productModels.DefaultImage, "", new { @class = "text-danger" })
                    <img src="~/img/ApHandler.png"  style="height:125px; width:125px" id="DefaultImagePreview"/>
            </div>

 <script>
    var openFile = function (event) {
        var input = event.target;

        var reader = new FileReader();
        reader.onload = function () {
            var dataURL = reader.result;
            var output = document.getElementById('DefaultImagePreview');
            output.src = dataURL;
        };
        reader.readAsDataURL(input.files[0]);
    };
</script>

0

Aquí hay una solución si está usando React:

import * as React from 'react'
import { useDropzone } from 'react-dropzone'

function imageDropper() {
  const [imageUrl, setImageUrl] = React.useState()
  const [imageFile, setImageFile] = React.useState()

  const onDrop = React.useCallback(
    acceptedFiles => {
      const file = acceptedFiles[0]
      setImageFile(file)

      // convert file to data: url
      const reader = new FileReader()
      reader.addEventListener('load', () => setImageUrl(String(reader.result)), false)
      reader.readAsDataURL(file)
    },
    [setImageFile, setImageUrl]
  )
  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })

  return (
    <div>
      <div {...getRootProps()}>
        {imageFile ? imageFile.name : ''}
        {isDragActive ? <p>Drop files here...</p> : <p>Select image file...</p>}
        <input {...getInputProps()} />
      </div>
      {imageUrl && (
        <div>
          Your image: <img src={imageUrl} />
        </div>
      )}
    </div>
  )
}

0

Este es el método más simple para obtener una vista previa de la imagen antes de subirla al servidor desde el navegador sin usar Ajax ni ninguna función complicada. Necesita un evento "onchange" para cargar la imagen.

<body>
  <input type="file" onchange="preview()">
  <img id="frame" src="" width="100px" height="100px"/>
</body>
<script>
    function preview() {
      frame.src=URL.createObjectURL(event.target.files[0]);
    }
</script>

La imagen se cargará inmediatamente después de seleccionarla.


-2

para mi aplicación, con parámetros de URL GET cifrados, solo esto funcionó. Siempre tengo un TypeError: $(...) is null. Tomado de https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.addEventListener("load", function () {
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">


-2
function assignFilePreviews() {
    $('input[data-previewable=\"true\"]').change(function() {
        var prvCnt = $(this).attr('data-preview-container');
        if (prvCnt) {
            if (this.files && this.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    var img = $('<img>');
                    img.attr('src', e.target.result);
                    img.error(function() {
                        $(prvCnt).html('');
                    });
                    $(prvCnt).html('');
                    img.appendTo(prvCnt);
                }
                reader.readAsDataURL(this.files[0]);
            }
        }
    });
}
$(document).ready(function() {
    assignFilePreviews();
});

HTML

<input type="file" data-previewable="true" data-preview-container=".prd-img-prv" />
<div class = "prd-img-prv"></div>

Esto también maneja el caso cuando se elige un archivo con un tipo no válido (ej. Pdf)

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.