Pregunta Vista previa de una imagen antes de que se cargue


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

¿Cómo puedo hacer esto?


1177
2017-12-16 09:51


origen


Respuestas:


Por favor, 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]);
  }
}

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

Tambien tu puedes prueba esta muestra aquí.


1941
2017-12-16 09:55



Hay un par de formas en que puedes hacer esto. La forma más eficiente sería usar URL.createObjectURL () sobre el Archivo de tu <input>. Pase esta URL a img.src decirle 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]);
  };
</script>

También puedes 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>


233
2017-11-27 08:17



Solución de una sola línea:

El siguiente código usa URLs de objetos, 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 de archivos, mientras que una URL de objeto es solo una cadena corta que hace referencia a los datos de archivos 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

128
2017-11-18 20:00



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, img para navegadores estándar y div para 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 JavaScript 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>

los pic_preview.js es el Javascript de la respuesta de LeassTaTT. Reemplace la $('#blah') con el $('#preview') y agrega 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 prueba en IE9 e informa. 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


41
2017-12-24 11:58



He editado la respuesta de @ Ivan para mostrar la imagen "Sin 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');
    }
}

22
2018-06-05 06:23



Aquí está un archivos múltiples versión, 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 la caja, y la única dependencia que necesita es jQuery.


14
2017-12-14 15:30



Sí. 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);
        }    
    }

Puedes obtener Demo en vivo de aquí.


11
2017-07-25 11:20



Limpio y simple JSfiddle

Esto será útil cuando desee que el evento se desencadene 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>

7
2017-11-30 05:57