Vista previa de una imagen antes de cargarla

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 usar Ajax para cargar la imagen.

¿Cómo puedo hacer esto?

preguntado el 16 de diciembre de 10 a las 06:12

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

Eche un vistazo a este enfoque de JavaScript puro, incluida su respuesta y el comentario de Ray Nicholus para la solución final: stackoverflow.com/questions/16430016/… -

28 Respuestas

Por favor, eche un vistazo al código de muestra a continuación:

imgInp.onchange = evt => {
  const [file] = imgInp.files
  if (file) {
    blah.src = URL.createObjectURL(file)
  }
}
<form runat="server">
  <input accept="image/*" type='file' id="imgInp" />
  <img id="blah" src="#" alt="your image" />
</form>

contestado el 11 de mayo de 21 a las 11:05

Hice una Implementación de ReactJS de esto. Funciona de maravilla. @kxc deberías hacer una llamada ajax y enviar input.files[0] como datos, ver el documento de jQuery. - sumi straessle

¿qué pasa si no se elige ningún archivo después de cargar uno? \ - TarangP

@EasyBB Después de cambiar la orientación de la imagen, ¿cómo reemplazarla con la imagen cargada real? Obtengo solo la imagen antigua. - Beige

Hay un par de formas de hacer esto. La forma más eficiente sería utilizar URL.createObjectURL () en el Declarar impuestos a partir de su . Pase esta URL a img.src para decirle al navegador que cargue la imagen proporcionada.

He aquí 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 puedes usar FileReader.readAsDataURL () para analizar el archivo de su . Esto creará una cadena en la memoria que contiene una representación en 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>

respondido 23 mar '20, 19:03

para evitar problemas de memoria debe llamar URL.revokeObjectURL cuando hayas terminado con tu gota - Apolo

@Apolo no en este caso, vea esta respuesta: stackoverflow.com/a/49346614/2313004 - Grreeenn

sobre tu primer comentario @tfmontague. ¿Está seguro? Acabo de copiar la cadena bese64 después de usar readAsDataURL y la abrí en otro navegador y funciona. - Ionel Lupu

@Lonel Lupu - ¡Creo que mi respuesta fue incorrecta! También usado readAsDataURL y pudo convertir los caracteres base64 en una imagen. - tim-montague

Lea atentamente: cuando se carga una imagen utilizando la entrada del archivo, se almacena en la caché del navegador. La URL.createObjectURL() creará un enlace a la imagen almacenada en caché en el navegador. Para crear la cadena base64 del archivo que se puede almacenar en una base de datos, use readAsDataURL. - tim-montague

Solución de una sola 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 en 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

Respondido el 07 de junio de 18 a las 14:06

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

@cnlevy ¿Cómo podemos acceder a los archivos subidos? ¿Solo es posible obtenerlo de la URL como mencionaste? Para ser específico, estoy usando un matraz que ya admite el acceso a los archivos cargados. ¿Hay alguna otra forma con esta frase única? - Abhishek Singh

Esta solución no funcionó para mí. No se muestra la vista previa de la imagen. - Sundaramoorthy J

Hermosa. Pero, ¿qué hay de borrar la memoria usando URL.revokeObjectURL()? :D - Pheianox

@pheianox Depende de ti, porque no es un problema tan grande. "Los navegadores liberarán las URL de los objetos automáticamente cuando se descargue el documento; sin embargo, para un rendimiento y uso de memoria óptimos, si hay momentos seguros en los que puede descargarlos explícitamente, debe hacerlo". Para más información Referencia de MDN - Rajan

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 por 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 lo siguiente específico de IE:

CSS:

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

En HTML incluimos los javascripts estándar y 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>

Las pic_preview.js es el Javascript de la respuesta de LeassTaTT. Reemplace la $('#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. 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

contestado el 31 de mayo de 20 a las 18:05

ESTE ES EL MÉTODO MÁS SENCILLO


Para obtener una VISTA PREVIA de la imagen antes de cargarla en el SERVIDOR desde el navegador sin usar Ajax ni ninguna función complicada.


Necesita un "onChange"para cargar la imagen.

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

Para obtener una vista previa de varias imágenes ¡Haga clic aquí!

Respondido el 19 de diciembre de 20 a las 12:12

IMPORTANTE: Si / al usar este método, es necesario eliminar la URL del objeto para evitar pérdidas de memoria. Esto se hace llamando URL.revokeObjectURL(myObjectUrl), Donde myObjectUrl es la URL del objeto creada (esto significa que deberá asignar la URL del objeto a una variable temporal antes de configurar la imagen src). Ver desarrollador.mozilla.org/en-US/docs/Web/API/URL/…. - isaac gregson

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');
    }
}

Respondido el 05 de junio de 14 a las 07:06

Aquí hay una 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 inmediato y la única dependencia que necesita es jQuery.

Respondido 06 Abr '17, 18:04

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);
        }    
    }

Usted puede obtener Demo en vivo de aquí.

Respondido 25 Jul 14, 12:07

Esta es la mejora de tamaño de cmlevy respuesta - intentar

<input type=file oninput="pic.src=window.URL.createObjectURL(this.files[0])">
<img id="pic" />

Respondido el 21 de Septiembre de 20 a las 19:09

¿Cómo se obtiene la ruta completa del archivo? - Bbb

@Bbb no parece una ruta típica, parece un "enlace" temporal: blob:null/35c35011-111c-4d9e-ac3f-a779e049eb3d - Kamil Kielczewski

Limpio y sencillo JSfiddle

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>

Respondido el 13 de diciembre de 17 a las 13:12

Solo una nota: no puedo atribuirme el mérito de esto, pero puedes usar <label> y evite javascript para manejar el clic del botón por completo. Activa la entrada de archivos con HTML / CSS puro., y no es hacky en absoluto. - Jo regular

Ejemplo con varias 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>

contestado el 02 de mayo de 17 a las 13:05

En React, si el archivo está en sus accesorios, puede usar:

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

Respondido 03 Oct 19, 11:10

¿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 entenderá el punto. Aquí puedes ver un ejemplo

respondido 21 mar '14, 13:03

A continuación se muestra 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]);
        }
    }

Respondido 29 Jul 16, 19:07

PARA VER MÚLTIPLES ARCHIVOS usando jquery

$(document).ready(function(){
    $('#image').change(function(){
        $("#frames").html('');
        for (var i = 0; i < $(this)[0].files.length; i++) {
            $("#frames").append('<img src="'+window.URL.createObjectURL(this.files[i])+'" width="100px" height="100px"/>');
        }
    });
});
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <input type="file" id="image" name="image[]" multiple /><br/>
    <div id="frames"></div>
</body>

Respondido 18 Oct 20, 18:10

Como: ¿por qué? $(this)[0].files > this.files - Sin fin

$ (this) [0] .files -> Da el número seleccionado de imágenes o [object FileList] - merrin k

Prueba esta

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">

Respondido el 21 de diciembre de 17 a las 04:12

¿Qué pasa con esta solución?

Simplemente agregue el atributo de datos "data-type = 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 tu 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
// https://stackoverflow.com/questions/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

Respondido el 06 de enero de 15 a las 16:01

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

$(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>

Respondido 27 Jul 15, 08:07

Para carga de múltiples imágenes (modificación a 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.

Respondido el 16 de diciembre de 17 a las 14:12

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=""/>

Respondido el 08 de junio de 19 a las 00:06

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>

Respondido 23 Jul 19, 11:07

Obtenga una vista previa de varias imágenes antes de que se carguen usando jQuery / javascript?

Esto previsualizará varios 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.

Respondido 21 ago 19, 08:08

¿Podría hacerse esto en javascript normal? Prefiero no agregar todo jQuery para las vistas previas ... ya que no lo estaba usando para ahorrar en los tiempos de carga. - eric sebasta

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>
  )
}

Respondido 14 ago 19, 10:08

<img id="blah" alt="your image" width="100" height="100" />
<input type="file" name="photo" id="fileinput" />
<script>
$('#fileinput').change(function() {
var url = window.URL.createObjectURL(this.files[0]);
 $('#blah').attr('src',url);
});
</script>

Respondido 10 ago 20, 21:08

https://stackoverflow.com/a/59985954/8784402

ES2017 Camino

// convert file to a base64 url
const readURL = file => {
    return new Promise((res, rej) => {
        const reader = new FileReader();
        reader.onload = e => res(e.target.result);
        reader.onerror = e => rej(e);
        reader.readAsDataURL(file);
    });
};

// for demo
const fileInput = document.createElement('input');
fileInput.type = 'file';
const img = document.createElement('img');
img.attributeStyleMap.set('max-width', '320px');
document.body.appendChild(fileInput);
document.body.appendChild(img);

const preview = async event => {
    const file = event.target.files[0];
    const url = await readURL(file);
    img.src = url;
};

fileInput.addEventListener('change', preview);

Respondido 31 Oct 20, 10:10

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...">

Respondido 01 ago 17, 07:08

Aquí hay una manera mucho más fácil de obtener una vista previa de la imagen antes de cargarla usando javascript puro;

//profile_change is the id of the input field where we choose an image
document.getElementById("profile_change").addEventListener("change", function() {

//Here we select the first file among the selected files.
const file = this.files[0];

/*here i used a label for the input field which is an image and this image will 
  represent the photo selected and profile_label is the id of this label */
const profile_label = document.getElementById("profile_label");

//Here we check if a file is selected
if(file) {
    //Here we bring in the FileReader which reads the file info. 
    const reader = new FileReader();
    
    /*After reader loads we change the src attribute of the label to the url of the 
    new image selected*/
    reader.addEventListener("load", function() {
        dp_label.setAttribute("src", this.result);
    })

    /*Here we are reading the file as a url i.e, we try to get the location of the 
    file to set that as the src of the label which we did above*/
    reader.readAsDataURL(file);

}else {
    //Here we simply set the src as default, whatever you want if no file is selected.
    dp_label.setAttribute("src", "as_you_want")
}
});

Y aquí está el HTML;

<label for="profile_change">
            <img title="Change Profile Photo" id="profile_label" 
             src="as_you_want" alt="DP" style="height: 150px; width: 150px; 
               border-radius: 50%;" >
</label>
<input style="display: none;" id="profile_change" name="DP" type="file" class="detail form-control">

respondido 01 nov., 20:07

Por favor comente el problema con mi respuesta. - Irfan Wani

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 (por ejemplo, pdf)

Respondido 28 Oct 18, 09:10

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.