Cursos a US$ 12.99 Ir a KODOTI
Cursos a US$ 12.99 KODOTI

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
Publicado:
7,901 lecturas
Rodríguez Patiño, Eduardo

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.


Estudia con nosotros

🚀 Mejora tus oportunidades laborales


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