Breaking News: Grepper is joining You.com. Read the official announcement!

previsualizar imagen de input image

Sleepy Serval answered on February 22, 2023 Popularity 1/10 Helpfulness 8/10

answer previsualizar imagen de input image

previsualizar imagen de input image

Comment

input image

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

https://parzibyte.me/blog/2019/05/20/previsualizar-imagen-input-file-javascript-html/

Popularity 1/10 Helpfulness 8/10 Language whatever

Source: Grepper

Tags: image input whatever

Link to this answer
Share Copy Link