En HTML , un control de selección de archivos es un componente de un formulario web con el que un usuario puede seleccionar un archivo local. Cuando se envía el formulario (quizás junto con otros datos del formulario), el archivo se carga en el servidor web . Allí, cuando llega el archivo, suele tener lugar alguna acción, como guardar el archivo en el servidor web. Sin embargo, la acción particular que tiene lugar está determinada por el script del lado del servidor al que se envía el formulario.
Ejemplo de código
Aquí hay un ejemplo de código de un formulario web con un control de selección de archivo. Es el input
elemento con el type="file"
que crea el control de selección de archivos.
< form action = "form-handler.php" method = "post" enctype = "multipart / form-data" > < div > < input id = "myfile" name = "myfile" type = "file" > < input value = "Subir ►" tipo = "enviar" > div > formulario >
Representación
Cuando se trata de la representación en la pantalla de un control de selección de archivos, existe cierta variación entre los navegadores web . Normalmente, en una plataforma basada en Windows, los agentes de usuario representarán un control de selección de archivos como un campo de texto, junto con un botón "Examinar". Cuando se presiona el botón "Examinar", se abre un cuadro de diálogo de archivo , con el que se puede realizar la selección de archivo real en la plataforma. Después de la selección, el nombre de archivo del archivo seleccionado se muestra en el campo de texto. Alternativamente, en lugar de usar el botón "Examinar", el nombre del archivo se puede ingresar directamente en el campo de texto.
Algunos navegadores, especialmente Firefox , [1] ya no permiten que se escriba directamente un nombre de archivo. Esta es una medida de seguridad: es posible engañar al usuario para que cargue información confidencial. [2]
Funcionalidad
El mecanismo para la carga de archivos basada en formularios se propuso originalmente en RFC 1867 (publicado en noviembre de 1995), como una extensión de HTML 2.0 (RFC 1866), después de su publicación. La carga de archivos basada en formularios se incorporó en HTML 3.2, que se refiere explícitamente a RFC 1867 para obtener más información sobre la carga de archivos basada en formularios.
HTML 4.01 no describe, en sí mismo, cómo se supone que funciona el control de selección de archivos, pero sí enumera RFC 2388 y RFC 1867 como referencias. [3]
Selección de varios archivos
La intención en RFC 1867 es que un único control de selección de archivo permita la selección de varios archivos. Esta intención parece reflejada en HTML 4.01, que, para el tipo de control de selección de archivo, establece [4]
Este tipo de control permite al usuario seleccionar archivos para que su contenido pueda ser enviado con un formulario. El elemento INPUT se utiliza para crear un control de selección de archivos.
Se ha observado [5] que el plural "archivos" en la cita anterior es una indicación de que, en HTML 4.01, se suponía que un control de selección de un solo archivo manejaba la selección de múltiples archivos y no solo un solo archivo.
Esta situación se aclara en HTML5 agregando un atributo "múltiple" cuando la entrada del archivo debe aceptar varios archivos. El borrador actual especifica que el nuevo comportamiento será:
A menos que se establezca el atributo múltiple, no debe haber más de un archivo en la lista de archivos seleccionados. [6]
Aceptar atributo
RFC 1867 también introdujo el accept
atributo para el input
elemento. Esto habilitaría el filtrado de tipo de archivo basado en el tipo MIME para el control de selección de archivo.
Además, se propone que la etiqueta INPUT tenga un atributo ACCEPT, que es una lista de tipos de medios separados por comas.
Si está presente un atributo ACCEPT, el navegador puede restringir los patrones de archivo solicitados para que coincidan con los correspondientes a las extensiones de archivo adecuadas para la plataforma.
Por lo tanto, un agente de usuario puede restringir la selección de archivos, como, por ejemplo, en lo siguiente, restringido a imágenes GIF y PNG o cualquier imagen:
< input id = "myfile" name = "myfile" type = "file" accept = "image / gif, image / png" > < input id = "myfile" name = "myfile" type = "file" accept = "image / * " >
En una plataforma Windows, esto podría significar que el agente de usuario mostraría archivos solo de los tipos especificados en el cuadro de diálogo de búsqueda de archivos.
Limitaciones del navegador
Los proveedores de navegadores adoptaron rápidamente el soporte básico para el control de selección de archivos. Por ejemplo, ya Internet Explorer 4, [7] Netscape Navigator 2.0 y Opera 3.5 [8] reconocieron el input
elemento de type="file"
como un control de selección de archivos.
Sin embargo, la mayoría de los navegadores modernos aún no implementan el control de selección de archivos como estaba previsto, o carecen de ciertas características. [5]
No se pueden seleccionar varios archivos
La carga basada en formularios de varios archivos con un único control de selección de archivos es compatible con las versiones actuales de Chrome, Firefox, Internet Explorer, Safari y Opera. Una fuente afirma [5] que Opera admite la selección de varios archivos a través de un único control de selección de archivos. Esto fue cierto para las versiones de Opera a partir de la 3.5, en la que se introdujo la función de carga de archivos. [8] Sin embargo, con la primera versión beta de Opera 7, esta función ya no estaba disponible. La versión 3.6 de Firefox comenzó a admitir la selección de archivos múltiples, [9] permitiendo al desarrollador cierto acceso limitado a los archivos antes de cargarlos en el servidor, a través de la API de archivos HTML5 . [10] Esta función también permite a los usuarios arrastrar y soltar archivos desde aplicaciones externas (como el Explorador de Windows ) directamente en la aplicación web. Un ejemplo notable de compatibilidad con esta función es Gmail, que permite agregar archivos adjuntos de esta manera.
HTML5 permite la carga de varios archivos utilizando el atributo múltiple en los elementos de entrada. [11]
Alternativa de JavaScript
Una solución es utilizar secuencias de comandos del lado del cliente , como JavaScript, para generar un control de selección de archivos adicional para cada archivo que el usuario seleccione para cargar. Con CSS , estos controles de selección de archivos adicionales pueden configurarse para que no se muestren. Un ejemplo de esta técnica se muestra en el complemento de carga de archivos múltiples para jQuery . De esta manera, el problema de carga de múltiples archivos se resuelve proporcionando tantos controles de selección de archivos como archivos tenga el usuario para cargar. Aún así, esto no resuelve el problema de seleccionar varios archivos para cargarlos en Internet Explorer.
Aceptar compatibilidad con atributos
El atributo de aceptación es actualmente compatible con Opera 11+, Chrome 16+, Safari 6+, Firefox 9+ y Microsoft Internet Explorer 10+.
Referencias
- ^ "388784 - (CVE-2007-3511) vulnerabilidad de robo de foco de entrada de archivo de Firefox" . Bugzilla.mozilla.org . Consultado el 2 de septiembre de 2013 .
- ^ "Vulnerabilidad de carga de archivos de eventos OnKeyDown de Mozilla Firefox" . Juniper.net. 2010-11-15. Archivado desde el original el 21 de febrero de 2013 . Consultado el 2 de septiembre de 2013 .
- ^ "Referencias de especificación HTML 4" . W3.org . Consultado el 2 de septiembre de 2013 .
- ^ "Formularios en documentos HTML" . W3.org . Consultado el 2 de septiembre de 2013 .
- ^ a b c "Entrada de archivo (o" carga ") en formularios HTML" . Cs.tut.fi . Consultado el 2 de septiembre de 2013 .
- ^ "Especificación HTML 5.1" . W3C.
- ^ "tipo de entrada = objeto de archivo" . Msdn2.microsoft.com. 2013-07-22 . Consultado el 2 de septiembre de 2013 .
- ^ a b "Historial del navegador: Opera" . Blooberry.com . Consultado el 2 de septiembre de 2013 .
- ^ el 10 de diciembre de 2009 por Paul Rouget (2009-12-10). "entrada de varios archivos en Firefox 3.6 ✩ Mozilla Hacks - el blog del desarrollador web" . Hacks.mozilla.org . Consultado el 2 de septiembre de 2013 .
- ^ "Uso de archivos de aplicaciones web - MDC" . Developer.mozilla.org. 2013-08-23 . Consultado el 2 de septiembre de 2013 .
- ^ Especificación HTML 5.1: 4.10.5.3 Atributos de elementos de entrada comunes
enlaces externos
- Especificación del control de selección de archivos de W3C