Anexsoft | Blog y dictado de cursos de Tecnología

En este encontrarás tutoriales de tecnología como PHP, ASP.NET MVC, Front-End, entre otros y cursos exigentes de modalidad online que te ayudarán a crecer profesionalmente.

Como previsualizar una imagen con javascript antes de subirla
Actualizado el 23 Septiembre, 2017 y leído 665 veces
Calificación: Sin calificar 10

Como previsualizar una imagen con javascript antes de subirla

Anexsoft

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.

¡Adquiera ya!

  • Software de Venta e Inventario hecho en PHP y Codeigniter

    Software de Venta e Inventario hecho en PHP y Codeigniter
  • Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#

    Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#
  • Código de fuente de Red Social desarrollada en ASP.NET MVC

    Código de fuente de Red Social desarrollada en ASP.NET MVC

Últimas publicaciones

Encuesta

¿Sobre qué te gustaría que se hable más?

Síguenos

Estudia con nosotros y crece profesionalmente

Nuestros cursos han sido hecho en base a lo que demanda el mercado hoy en día.
La experiencia obtenida es la de un ambiente laboral.

Anexsoft
© 2017 Anexsoft, blog y cursos online de TI.