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 hace 22 días y leído 342 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 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
  • Software de Venta e Inventario hecho en PHP y Codeigniter

    Software de Venta e Inventario hecho en PHP y Codeigniter

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