📷 Carga de archivos con vista previa de imagen

👇 Así se ve 👇

👀 Demostración

Vista previa de la imagen 
<form action="upload.php" method="post" enctype="multipart/form-data" onsubmit="event.preventDefault()">
  <p>Selecciona una imagen:</p>
  <input type="file" accept="image/*" onchange="previewImage(event)">
  <div style="margin-top: 1em;">
    <img id="imagePreview" src="#" alt="Vista previa de la imagen" style="display:none; max-width:100%;">
  </div>

  <button type="submit" style="margin-top: 1em;">📤 Enviar</button>
</form>

<script>
function previewImage(event) {
  const img = document.getElementById("imagePreview");
  img.src = URL.createObjectURL(event.target.files[0]);
  img.style.display = "block";
}
</script>

📌 Significado y uso de los atributos del formulario

① action="upload.php"
Define la URL de destino a la que se enviarán los datos cuando se envíe el formulario.

<form action="upload.php" ...>

Nota: Puedes crear tu propio archivo upload.php para guardar imágenes en el servidor, o utilizar una URL de un servicio externo como Amazon S3, Google Drive API, etc.



② enctype="multipart/form-data"
Especifica el tipo de codificación necesario para enviar archivos de imagen u otros datos binarios a través del formulario.

<form enctype="multipart/form-data" ...>

Si no se especifica: los archivos podrían no enviarse correctamente al servidor (quedando vacíos o inválidos).



③ onsubmit="event.preventDefault()"
Evita que el formulario se envíe realmente al servidor. Útil para demostraciones o vistas previas.

<form onsubmit="event.preventDefault()" ...>

En un entorno real: elimina el atributo onsubmit o utiliza form.submit() desde JavaScript para enviar el formulario manualmente.



🧪 Ejemplo completo (con todos los atributos)

<form action="upload.php" method="post" enctype="multipart/form-data" onsubmit="event.preventDefault()">

✅ Usos y ventajas de esta plantilla

  • Vista previa inmediata al seleccionar una imagen
  • Brinda una experiencia intuitiva al usuario
  • Fácil de integrar en interfaces de carga
  • Útil para portafolios y registros de productos
  • Comprensible incluso para principiantes en JS

🧩 Aplicaciones y casos de uso

La función de vista previa de imágenes es una mejora estándar utilizada en sitios de comercio electrónico y páginas de creación de perfiles para mejorar la experiencia del usuario. Al mostrar la imagen seleccionada de inmediato, también ayuda a evitar errores al subir archivos.

Esta plantilla utiliza URL.createObjectURL() para generar una URL temporal del archivo de imagen seleccionado. Esto permite a los usuarios previsualizar la imagen al instante sin necesidad de subirla al servidor.

Además, se emplea img.style.display = "block" para controlar la visibilidad, mostrando la imagen solo después de haber sido seleccionada.

Si deseas añadir restricciones como validación de tamaño o formato del archivo, puedes usar propiedades como event.target.files[0].type o .size para personalizar la lógica.

Familiarizarse con esta configuración básica facilita agregar funcionalidades más avanzadas en el futuro, como soporte para múltiples vistas previas o cargas mediante arrastrar y soltar.