Como previsualizar una imagen con javascript antes de subirla

Veremos como hacer uso de la clase FileReader para mostrar una vista previa de nuestra imagen.

Rodríguez Patiño, Eduardo
3,818 lecturas
Rodríguez Patiño, Eduardo
Hemos migrado hace poco nuestras publicaciones del blog antiguo. Si crees que esta se encuentra incompleta o sin coherencia deja un comentario para restaurarla manualmente.

Durante esta semana (semana que escribí esta publicación), tuve que modificar un módulo y encontré un problema, que para hacer el preview primero subían la imagen al servidor y luego la renderizaban causando que nuestro servidor de almacenamiento genere data basura y en un futuro esto puede aumentar los costos de servicio.

Entonces lo que hice fue pasar esta lógica a javascript para evitar cargar la imagen en el servidor mediante el uso de la clase FileReader.

FileReader

Esta clase nos permite leer archivos y/o información en buffer desde el lado el cliente.

Fuente: https://developer.mozilla.org/es/docs/Web/API/FileReader

Ejemplo en marcha

El ejemplo es muy sencillo, lo que tenemos que hacer es asignar un evento a un input del tipo file para que cuando se le adjunte algún documento este pueda leer la imagen.

<input id="file" type="file" />
<hr>
<div id="preview"></div>

Y mediante javascript vamos a manipular el dom para generar la imagen.

document.getElementById("file").onchange = function(e) {
  // Creamos el objeto de la clase FileReader
  let reader = new FileReader();

  // Leemos el archivo subido y se lo pasamos a nuestro fileReader
  reader.readAsDataURL(e.target.files[0]);

  // Le decimos que cuando este listo ejecute el código interno
  reader.onload = function(){
    let preview = document.getElementById('preview'),
            image = document.createElement('img');

    image.src = reader.result;

    preview.innerHTML = '';
    preview.append(image);
  };
}

Restricciones

En mi caso no le damos soporte a Internet Explorer, asi que todo debería funcionar bien con un navegador moderno.

¿Te gustó nuestra publicación?
Suscríbete a nuestro boletín