Cuando utilizamos la etiqueta HTML <input type="file"> podemos seleccionar un archivo desde nuestro ordenador y, por defecto, el navegador nos muestra únicamente el nombre del archivo escogido. Sin embargo, podemos personalizar nuestro HTML para que, además, muestre una vista previa de la imagen seleccionada.
Esto no viene por defecto en HTML, pero podemos conseguirlo fácilmente con el atributo onchange y una sola línea de código JavaScript.
Un input de tipo archivo simple se vería de la siguiente manera:
<input type="file" name="" id="">Para mostrar la imagen seleccionada necesitamos añadir una etiqueta <img>.
En este ejemplo, le damos un ancho máximo de 150 píxeles:
<img id="img" alt="Vista previa de la imagen" style="max-width: 150px">
<input type="file" name="" id="">Ahora utilizamos el atributo onchange dentro del input.
Cada vez que seleccionemos una imagen, el atributo src de la etiqueta <img> cambiará automáticamente y apuntará al archivo seleccionado:
<img id="img" style="max-width: 150px">
<input type="file" onchange="img.src = window.URL.createObjectURL(this.files[0])">¿Qué hace createObjectURL?
La función createObjectURL() crea una URL temporal que apunta al primer archivo seleccionado (this.files[0]), en este caso nuestra imagen.
Con este pequeño truco podemos mostrar una vista previa de las imágenes seleccionadas por el usuario sin necesidad de subirlas al servidor. Esto mejora la experiencia de usuario y nos permite validar visualmente el archivo antes de enviarlo.
Deja una respuesta