En el desarrollo web moderno, ofrecer una previsualización inmediata de un archivo antes de subirlo al servidor es una práctica de UX fundamental.
💡 ¿Quieres aprender más? Este artículo es parte de nuestra Recopilación de Plugins JavaScript y jQuery → donde encontrarás más de 20 tutoriales gratuitos esperándote para llevar tus habilidades al siguiente nivel.
Esto permite al usuario confirmar que ha seleccionado el archivo correcto, evitando errores y cargas innecesarias.
Para implementar esta funcionalidad de forma sencilla, utilizaremos la API de JavaScript junto con un formulario estándar.
Requisitos previos
Para que este script funcione, necesitamos dos elementos clave en nuestro HTML:
- Un campo
<input type="file">para seleccionar la imagen. - Un elemento
<img>(que puede estar vacío o tener una imagen por defecto) donde se renderizará la previsualización.
¿Cómo funciona el proceso?
Gracias al evento change de JavaScript, podemos detectar cada vez que el usuario selecciona un archivo nuevo. Al hacerlo, el script lee el archivo localmente y actualiza automáticamente el atributo src de nuestra imagen. Esto permite que el usuario pueda cambiar de archivo cuantas veces quiera y la vista previa se actualice al instante sin recargar la página.
Codigo
A continuacion empezaremos el codigo, la primera parte es el codigo HTML.
<form>
<div class="mb-3">
<label for="imagen_input" class="form-label">Imagen</label>
<!-- AGREGAR UN INPUT DE ARCHIVO PARA LA IMAGEN -->
<input type="file" class="form-control" id="imagen_input" aria-describedby="emailHelp">
<!-- AGREGAR UN COMPONENTE DE IMAGEN VACIO -->
<br>
<img id="imagen_img" src="" alt="Tu Imagen va AQUI" style="width: 960px; height: 540px;" />
</div>
<br><br>
<button type="button" class="btn btn-primary">Subir ...</button>
</form>En el codigo HTML es importante tener en cuenta el ID que tienen el input file “imagen_input” y el ID que tiene el componente IMG “imagen_img” ya que estos identificadores los utilizaremos en el siguiente codigo javascript.
<script type="text/javascript">
imagen_input = document.getElementById("imagen_input");
imagen_img = document.getElementById("imagen_img");
imagen_input.onchange = evt => {
const [file] = imagen_input.files
if (file) {
imagen_img.src = URL.createObjectURL(file)
}
}
</script>Como pueden ver el codigo javascript obtiene el elemento input y el elemento img.
Cada vez que el elemento image_input cambie, se ejecuta una funcion para cambiar el SRC del elemento imagen y asi crear un efecto de visualizacion.
Resultado
Y listo.
Lo unico que tienen es crear un archivo HTML y Copiar-Pegar los dos fragmentos de codigo en el orden en que estan.
¿Necesitas un software de ventas listo para producción?
Inventio Max es la solución profesional con soporte para múltiples almacenes, reportes avanzados y gestión de usuarios.
Ver Inventio Max – Sistema de Inventario y Ventas Profesional →