11.1 Elemento <input type="file">
Las aplicaciones web a menudo requieren que los usuarios carguen archivos al servidor. Esto puede ser útil para la carga de documentos, imágenes, videos y otros tipos de datos. HTML ofrece el elemento <input type="file"> para crear interfaces de carga de archivos. A continuación, exploraremos en detalle el uso de este elemento y sus atributos, como multiple y accept.
El elemento <input type="file"> crea un componente de interfaz que permite a los usuarios seleccionar archivos de su dispositivo y cargarlos al servidor. Es uno de los elementos clave de los formularios en HTML, que permite integrar la funcionalidad de carga de archivos en aplicaciones web.
Atributos principales del elemento <input type="file">
type="file"— define que el elemento está diseñado para la selección de archivos.name— establece el nombre del elemento que se usará al enviar datos del formulario al servidor.multiple— permite al usuario seleccionar varios archivos a la vez.accept— especifica los tipos de archivos que se pueden seleccionar, usando MIME-types o extensiones de archivos.
Ejemplos de uso del elemento <input type="file">
Ejemplo sencillo
Ejemplo más básico de un elemento para cargar un archivo sin atributos adicionales:
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="file">Selecciona un archivo:</label>
<input type="file" id="file" name="file">
<button type="submit">Subir</button>
</form>
11.2 Atributo multiple
El elemento <input type="file"> soporta varios atributos que extienden su funcionalidad. Vamos a ver dos de ellos: multiple y accept.
El atributo multiple permite a los usuarios seleccionar varios archivos para cargar. Cuando este atributo se añade, los usuarios pueden elegir múltiples archivos en el cuadro de diálogo de selección de archivos.
Ejemplo de uso:
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="files">Selecciona archivos:</label>
<input type="file" id="files" name="files" multiple>
<button type="submit">Subir</button>
</form>
En el cuadro de diálogo de selección de archivos, los usuarios pueden seleccionar y cargar varios archivos a la vez, manteniendo presionada la tecla Ctrl (Cmd en Mac) o Shift.
11.3 Atributo accept
El atributo accept restringe los tipos de archivos que pueden ser seleccionados por el usuario. Esto es útil para asegurarse de que los usuarios carguen solo tipos de archivos permitidos (por ejemplo, solo imágenes o documentos).
Ejemplo de uso:
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="image">Selecciona una imagen:</label>
<input type="file" id="image" name="image" accept="image/*">
<button type="submit">Subir</button>
</form>
El atributo accept restringe los tipos de archivos que se pueden seleccionar. Esto se puede hacer por MIME-types o extensiones de archivos. En el ejemplo anterior, los usuarios solo pueden seleccionar archivos de imagen.
Ejemplos de valores del atributo accept
Restricción por tipo de archivo:
accept="image/*": cualquier imagenaccept="video/*": cualquier archivo de videoaccept="audio/*": cualquier archivo de audio
Restricción por extensión de archivo:
accept=".jpg/.jpeg/.png": solo imágenes en formatos JPEG y PNGaccept=".pdf/.doc/.docx": solo documentos PDF y Word
11.4 Manejo de archivos en el lado del cliente
A veces se requiere el procesamiento previo de archivos en el lado del cliente antes de enviarlos al servidor. Por ejemplo, se puede mostrar una vista previa de imágenes o comprobar el tamaño del archivo. Para esto se utiliza JavaScript.
Ejemplo de vista previa de imagen:
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="image">Selecciona una imagen:</label>
<input type="file" id="image" name="image" accept="image/*">
<div id="preview"></div>
<button type="submit">Subir</button>
</form>
document.getElementById('image').addEventListener('change', function(event) {
const preview = document.getElementById('preview');
preview.innerHTML = '';
const files = event.target.files;
for (let i = 0; i < files.length; i++) {
const file = files[i];
const reader = new FileReader();
reader.onload = function(e) {
const img = document.createElement('img');
img.src = e.target.result;
img.style.maxWidth = '200px';
preview.appendChild(img);
}
reader.readAsDataURL(file);
}
});
Explicación
FileReader: se utiliza para leer el contenido de archivos en el lado del clientereader.onload: evento que se activa cuando el archivo ha sido completamente leídoreader.readAsDataURL(file): método que lee el archivo y lo codifica como Data URL, lo que permite mostrarlo en la etiqueta<img>
GO TO FULL VERSION