Cómo agregar una previsualización de imagen en un formulario con Javascript

Victor Arana Flores

22 Jul 2022

Al crear un sitio web, es común que los clientes soliciten la posibilidad de subir imágenes a través de un formulario. Si además quieren que se pueda previsualizar la imagen antes de enviar el formulario, se puede lograr fácilmente con JavaScript. Aquí te mostramos cómo hacerlo en unos pocos pasos.

Para comenzar, agrega un campo input de tipo "file" al formulario y habilita la opción de carga de archivos. A continuación, agrega una etiqueta "img" con un ID para mostrar la imagen seleccionada.

El siguiente es el código HTML que necesitarás para implementar esta función:

<!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>

	<img id="imgPreview">

	<form action="#"
            method="POST"
            enctype="multipart/form-data">

    		<input type="file" accept="image/*" onchange="previewImage(event, '#imgPreview')">
    		
			<button>Enviar formulario</button>
	</form>

    <script src="script.js"></script>
  </body>
</html>

En el código HTML anterior, hemos agregado una etiqueta "img" con el ID "imgPreview", que es donde se mostrará la imagen seleccionada. También hemos agregado un campo input de tipo "file" que está escuchando cualquier cambio en el archivo seleccionado. Cada vez que se selecciona una imagen, se ejecuta la función "previewImage", que se encarga de mostrar la imagen seleccionada en la etiqueta "img".

A continuación, necesitarás agregar la siguiente función JavaScript en un archivo externo llamado "script.js":

function previewImage(event, querySelector){

	//Recuperamos el input que desencadeno la acción
	const input = event.target;
	
	//Recuperamos la etiqueta img donde cargaremos la imagen
	$imgPreview = document.querySelector(querySelector);

	// Verificamos si existe una imagen seleccionada
	if(!input.files.length) return
	
	//Recuperamos el archivo subido
	file = input.files[0];

	//Creamos la url
	objectURL = URL.createObjectURL(file);
	
	//Modificamos el atributo src de la etiqueta img
	$imgPreview.src = objectURL;
                
}

En la función "previewImage", se recupera la información del evento y se busca la etiqueta "img" donde se mostrará la imagen. Si se ha seleccionado un archivo, se recupera el archivo y se crea una URL del objeto. Luego, se establece la URL del objeto como el atributo "src" de la etiqueta "img".

Con estos pasos, ya tienes una función de previsualización de imagen en tu formulario HTML. Esto no solo hace que tu sitio web sea más atractivo visualmente, sino que también mejora la experiencia del usuario al permitirle previsualizar la imagen antes de enviar el formulario.

1 comentarios

Inicia sesión para comentar

Iniciar sesión

Comentarios:

  • Otorres828

    Otorres828 hace 2 años

    Seria bueno un tutorial de como insertar codigo Javascrip/html/json en ckeditor. yo lo hice con ckeditor4 pero no me da los colores del lenguaje que selcciono