Formulario para enviar archivos al servidor

 

Hay ocasiones en las que al hacer un formulario además de los datos típicos de texto como el nombre, dirección, etc. o seleccionables como hombre / mujer, queremos recoger algún tipo de archivo.

Esto por ejemplo es muy común en las páginas de contactos o redes sociales, donde se pueden subir fotos.

Para hacer esto, primero debemos establecer el tipo de encriptación del formulario a "multipart/form-data" (por defecto es "application/x-www-form-urlencoded"), esto permite enviar múltiples tipos de datos a través del formulario, como texto plano de los campos normales y datos binarios del fichero.

Después deberemos introducir un campo de tipo fichero (file), para poder enviar el archivo (también se pueden añadir otros campos como text, checkbox, ...). esto hará que el explorador "pinte" el campo de texto con el botón para buscar el archivo.



Filtrar tipos de archivos

Ya en el RFC (Request for Comments - Petición De Comentarios) originario de 1995 que genero la implementación de la subida de archivos mediante formularios (RFC1867 - Form-based File Upload in HTML), ya se proponía la creación del atributo "accept" para el tag "input". En la "especificación de referencia" del HTML 3.2 (HTML 3.2 Reference Specification), se comenta que algunos navegadores podrían usarlo (15 años después ninguno de los más usados lo hacen).

Posteriormente en la "documentación de tipo" del HTML 4.01 (actualmente la recomendada desde 1999) Document Type Definition, ya aparece el atributo "accept" estandarizado, al igual que aparece en la versión de HTML5, futura recomendada (en teoría en 2012).

Sin embargo no parece ser aplicado por los diferentes exploradores, el motivo puede ser que los cuadros de búsqueda de los navegadores, suelen utilizar las librerías del sistema operativo sobre el que corre, que no suelen filtrar por los encabezados MIME, sino por su extensión, aunque eso es más problema del W3C, Mozilla, MS y toda esa gente.

CONCLUSIÓN: Aunque la teoría (W3C) dice que se puede filtrar por tipo de archivo, la realidad (navegadores) dice que NO.

No obstante y en caso de que en un futuro, los navegadores si acepten este atributo, ponemos unos ejemplos de como se usaría:

<!--Esto haría que se buscasen imágenes-->
<input type="file" name="archivo" id="archivo" accept="image/*" />

<!--Esto haría que se buscasen archivos de tipo pdf-->
<input type="file" name="archivo" id="archivo" accept="application/pdf" />

<!--Esto haría que se buscasen imágenes gif y jpg-->
<input type="file" name="archivo" id="archivo" accept="image/gif, image/jpeg" />



Por último recordar que el atributo action debería llamar a una dirección donde se pudieran procesar los datos, por ejemplo una página PHP ó ASP.



Ejemplo:
<form method="post" enctype="multipart/form-data" action="about:blank">
    Seleccione el archivo : <input type="file" name="archivo" id="archivo" />
    <br />
    <input type="submit" value="Aceptar" />
</form>

Demostración:

    Seleccione el archivo :
    

    

Links relacionados:
Generador de códigos para crear Formularios HTML
Formulario de contacto en Flash con adjunto
Métodos de conexión HTTP
Enviar un formulario por correo electrónico con adjuntos en PHP
Enviar un formulario por correo electrónico con PHP
Evento Submit de un formulario al pulsar intro
Validar todos los campos de un formulario
Forzar descarga de ficheros en lado cliente con PHP
Leer líneas de un archivo con la función file con PHP
Compresión de ficheros con PHP a GZIP con PHP
Cambiar tamaño y peso de imágenes con PHP
Variables globales de servidor con $_SERVER en PHP


Para cualquier duda, consulta, sugerencia, opinión, colaboración, etc; no dude en ponerse en contacto con nosotros

Copyright © 2002-2017 [McAnam]. Reservados todos los derechos.
www.mcanam.com