En esta entrada, te mostraré cómo implementar la previsualización de una imagen antes de enviarla a través de un formulario web utilizando solo HTML y JavaScript. Este método es útil para mejorar la experiencia del usuario al permitirle ver la imagen seleccionada antes de enviarla.
Crear el Formulario HTML
El primer paso es crear un formulario simple en HTML. A continuación, te muestro el código necesario:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Previsualización de Imagen</title>
</head>
<body>
<h1>Previsualización de Imagen</h1>
<form id="imageForm">
<label for="imageUpload">Selecciona una imagen:</label>
<input type="file" id="imageUpload" accept="image/*">
<br>
<img id="imagePreview" src="#" alt="Previsualización" style="display:none; max-width: 300px; max-height: 300px;">
</form>
</body>
</html>
Se crea un formulario con un input de tipo file para que el usuario pueda seleccionar una imagen. También se añade una etiqueta img para mostrar la previsualización de la imagen seleccionada.
Añadir JavaScript para la Previsualización
El siguiente paso es añadir un script de JavaScript que maneje la lectura y visualización de la imagen seleccionada. El código JavaScript que necesitas es el siguiente:
<script>
document.getElementById('imageUpload').addEventListener('change', function(event) {
var reader = new FileReader();
reader.onload = function() {
var output = document.getElementById('imagePreview');
output.src = reader.result;
output.style.display = 'block';
}
reader.readAsDataURL(event.target.files[0]);
});
</script>Se añade un event listener al input de tipo file para que, cuando el usuario seleccione una imagen, se lea el archivo utilizando FileReader y se muestre en la etiqueta img para la previsualización.
Resultado
Video Tutorial
Para una explicación más detallada, puedes ver mi video en YouTube donde explico paso a paso este proceso.
Descarga el Código
Puedes descargar el código completo desde mi repositorio en GitHub.
Comentarios
Si tienes alguna duda o sugerencia, no dudes en dejar un comentario a continuación. ¡Estoy aquí para ayudarte!