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.
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="https://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.