Previsualizar Imagenes con Javascript antes de Subir

 in Javascript by

En algunos o muchos casos es necesario previsualizar la imagen que vamos a subir al servidor, aqui entra en funcion el siguiente sciprt facil y sencillo.

Vamos a hacer un script para previsualizar las imagenes antes de subirlas, para ello usaremos un formulario y un codigo javascript.

Lo primero que necesitamos es un formulario que contenga un input type=”file” y un elemento IMG que no tenga un src o podemos poner una imagen de prueba.

El componente de imagen va a cambiar cada vez que nosotros cambiemos la imagen, podemos estar cambiando la imagen desde el input file y la imagen se actualizara o visualizara automaticamente.

Codigo

A continuacion empezaremos el codigo, la primera parte es el codigo HTML.

<form>
  <div class="mb-3">
    <label for="imagen_input" class="form-label">Imagen</label>
    <!-- AGREGAR UN INPUT DE ARCHIVO PARA LA IMAGEN -->
    <input type="file" class="form-control" id="imagen_input" aria-describedby="emailHelp">
    <!-- AGREGAR UN COMPONENTE DE IMAGEN VACIO -->
    <br>
	  <img id="imagen_img" src="" alt="Tu Imagen va AQUI" style="width: 960px; height: 540px;" />
  </div>
  <br><br>
  <button type="button" class="btn btn-primary">Subir ...</button>
</form>

En el codigo HTML es importante tener en cuenta el ID que tienen el input file “imagen_input” y el ID que tiene el componente IMG “imagen_img” ya que estos identificadores los utilizaremos en el siguiente codigo javascript.

<script type="text/javascript">
imagen_input = document.getElementById("imagen_input");
imagen_img = document.getElementById("imagen_img");
	imagen_input.onchange = evt => {

  const [file] = imagen_input.files
  if (file) {
    imagen_img.src = URL.createObjectURL(file)
  }
}
</script>

Como pueden ver el codigo javascript obtiene el elemento input y el elemento img.

Cada vez que el elemento image_input cambie, se ejecuta una funcion para cambiar el SRC del elemento imagen y asi crear un efecto de visualizacion.

Resultado

Y listo.

Lo unico que tienen es crear un archivo HTML y Copiar-Pegar los dos fragmentos de codigo en el orden en que estan.

Leave a comment