Cuando un usuario selecciona un archivo de tipo imagen con un input de tipo file en HTML podemos generar una previsualización de la imagen dentro de una etiqueta img, a fin de que el usuario conozca la imagen que seleccionó antes de que procese la imagen.

En este post vamos a ver cómo mostrar la imagen seleccionada, escuchando el evento change del input y estableciendo ese file como src de una imagen.

Previsualizar imagen de input con JavaScript

Mostrar imagen seleccionada desde input

Para mostrar la imagen que fue seleccionada con un input de tipo file dentro de un elemento img comenzamos escuchando el evento change del input.

Dicho input tiene una propiedad llamada files, la cual es un arreglo que tiene los archivos seleccionados por el usuario.

Esos archivos son de tipo BLOB, y para convertirlos a una URL que se puede poner a un elemento de imagen creamos un UrlObject con URL.createObjectURL(archivo) y el resultado lo ponemos como src de la imagen.

Código de ejemplo

Para demostrar esto he creado un pequeño ejemplo que se puede ver aquí.

Su funcionamiento es sencillo, simplemente selecciona una imagen y la misma se mostrará en el navegador.

El código es el siguiente:

En el ejemplo previsualizamos el primer archivo, pero con un ciclo podrían previsualizarse todos.

La imagen, los estilos y todo eso depende de ti, yo te he mostrado cómo mostrar la imagen seleccionada en un elemento img.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

Relacionado:  Reconocimiento de voz en la web

Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 515 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

1 Comment

Obed Medina · noviembre 27, 2019 a las 2:50 pm

Le(s) felicito, páginas como esta y con explicaciones claras es lo que el mundo de la programación necesita para crecer y tener en cada región material de provecho para todo el que necesite hacer actividades en la web. EL CONOCIMIENTO NO ES INDIVIDUAL, APRENDEMOS DE LO QUE NOS RODEA: MATERIALES, ORGÁNICOS, ANIMALES Y OTROS SERES HUMANOS
Que Dios le(s) bendiga!!!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: