Previsualizar una imagen con Javascript

Victor Arana Flores

22 Jul 2022

Cuando nos encontramos desarrollando un sitio web, es muy común que nuestro cliente nos solicite que agreguemos un campo que le permita poder subir una imagen.

Para lograr ese requerimiento es tan simple como agregar un input de tipo file y habilitar la subida de archivos en el formulario. Pero qué ocurre si el cliente te pide que aparte de seleccionar una imagen, se debe poder previsualizar la imagen antes de que el formulario sea enviado.

Lograr esto es muy sencillo con Javascript, y lo haremos en unos cuantos pasos.

Estructura HTML

La estructura de nuestro código HTML se debe ver de la siguiente manera

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

Como pueden ver en nuestra código HTML, hemos incluido una etiqueta img a la cual le hemos agregado el id imgPreview. Será en esta etiqueta en donde cargaremos nuestra imagen luego de que sea seleccionada.

Por otro lado, el input file se encuentra a la escucha de cualquier cambio, y cada vez que dicho cambio ocurra, se ejecutará una función llamada previewImage() a la cual le pasamos la información del evento, así como el id de la etiqueta img en donde cargaremos la imagen.

La función previewImage() aún no existe, por lo que hemos linkado un archivo js externo, que es donde escribiremos dicha función.

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;
                
}

Eso sería todo, ya podemos previsualizar la imagen seleccionada.

1 comentarios

Inicia sesión para comentar

Iniciar sesión

Comentarios:

Otorres828 hace 8 meses

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