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.
![](https://parzibyte.me/blog/wp-content/uploads/2019/05/Previsualizar-imagen-de-input-con-JavaScript.png)
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.
Su funcionamiento es sencillo, simplemente selecciona una imagen y la misma se mostrará en el navegador.
El código es el siguiente:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Previsualizar imagen</title>
</head>
<body>
<h1>Previsualización de imagen</h1>
<a href="//parzibyte.me/blog" target="_blank">By Parzibyte</a>
<br>
<!-- El input para seleccionar los archivos, fíjate en su id -->
<input type="file" id="seleccionArchivos" accept="image/*">
<br><br>
<!-- La imagen que vamos a usar para previsualizar lo que el usuario selecciona -->
<img id="imagenPrevisualizacion">
<script src="script.js"></script>
</body>
</html>
// Obtener referencia al input y a la imagen
const $seleccionArchivos = document.querySelector("#seleccionArchivos"),
$imagenPrevisualizacion = document.querySelector("#imagenPrevisualizacion");
// Escuchar cuando cambie
$seleccionArchivos.addEventListener("change", () => {
// Los archivos seleccionados, pueden ser muchos o uno
const archivos = $seleccionArchivos.files;
// Si no hay archivos salimos de la función y quitamos la imagen
if (!archivos || !archivos.length) {
$imagenPrevisualizacion.src = "";
return;
}
// Ahora tomamos el primer archivo, el cual vamos a previsualizar
const primerArchivo = archivos[0];
// Lo convertimos a un objeto de tipo objectURL
const objectURL = URL.createObjectURL(primerArchivo);
// Y a la fuente de la imagen le ponemos el objectURL
$imagenPrevisualizacion.src = objectURL;
});
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
.
Gracias… por dedicarte a compartir los conocimientos.
Para mi representa GRANDEZA!
Hoy tu articulo me enseño.
PD no me dejo dejar la página ???
Muchas Gracias, tenia que hacer un ejercicio.. pero usaba Vue, y para no usar todo ese rollo, mejor hacerlo asi.. mucho mejor
Muchas Gracias Excelente contenido y animo adelante realmente da gusto encontrar contenido de esta forma
Gracias. Saludos y éxito!
Muchas gracias por la ayuda
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!!!