javascript

Previsualizar imagen de input file con JavaScript y HTML

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.

Previsualizar imagen de input con JavaScript

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

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Ver comentarios

  • Gracias... por dedicarte a compartir los conocimientos.
    Para mi representa GRANDEZA!

    Hoy tu articulo me enseño.

    PD no me dejo dejar la página ???

  • Muchas Gracias, tenia que hacer un ejercicio.. pero usaba Vue, y para no usar todo ese rollo, mejor hacerlo asi.. mucho mejor

  • Muchas Gracias Excelente contenido y animo adelante realmente da gusto encontrar contenido de esta forma

  • Le(s) felicito, páginas como esta y con explicaciones claras es lo que el mundo de la programación necesita para crecer y tener en cada región material de provecho para todo el que necesite hacer actividades en la web. EL CONOCIMIENTO NO ES INDIVIDUAL, APRENDEMOS DE LO QUE NOS RODEA: MATERIALES, ORGÁNICOS, ANIMALES Y OTROS SERES HUMANOS
    Que Dios le(s) bendiga!!!

Entradas recientes

Tramitar acta de nacimiento en línea de manera instantánea

En este post te quiero compartir mi experiencia tramitando un acta de nacimiento de México…

22 min hace

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

2 semanas hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

2 semanas hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

2 semanas hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

2 semanas hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

2 semanas hace

Esta web usa cookies.