Hispanopedia WikiEn HTML , un control de selección de archivos es un componente de un formulario web que permite al usuario seleccionar un archivo local. Al enviar el formulario (posiblemente junto con otros datos), el archivo se carga en el servidor web . Allí, al llegar el archivo, se suele realizar alguna acción, como guardarlo. Sin embargo, la acción específica que se ejecuta depende del script 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 archivos. Es el inputelemento 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 ► " type = " submit" > </div> </form>Representación
En cuanto a la visualización en pantalla de un control de selección de archivos, existen algunas variaciones entre los navegadores web . Normalmente, en plataformas Windows, el agente de usuario muestra este control como un campo de texto con un botón "Examinar". Al pulsar este botón, se abre un cuadro de diálogo que permite seleccionar el archivo deseado. Tras la selección, el nombre del archivo seleccionado se muestra en el campo de texto. Como alternativa, en lugar de usar el botón "Examinar", se puede escribir el nombre del archivo directamente en el campo de texto.
Algunos navegadores, en particular Firefox , [ 1 ] ya no permiten escribir directamente el nombre del archivo. Esta es una medida de seguridad: es posible engañar al usuario para que suba información confidencial. [ 2 ]
Funcionalidad
El mecanismo para la carga de archivos mediante formularios se propuso originalmente en el RFC 1867 (publicado en noviembre de 1995), como una extensión de HTML 2.0 (RFC 1866), tras su publicación. Posteriormente, la carga de archivos mediante formularios se incorporó a HTML 3.2, que remite explícitamente al RFC 1867 para obtener más información al respecto.
HTML 4.01 no describe, en sí mismo, cómo se supone que debe funcionar 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 archivos debería permitir la selección de varios archivos. Esta intención parece reflejarse en HTML 4.01, que, para el tipo de control de selección de archivos, establece [ 4 ]
Este tipo de control permite al usuario seleccionar archivos para que su contenido pueda enviarse mediante 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 debía manejar la selección de varios archivos y no solo un único archivo.
Esta situación se está aclarando en HTML5 mediante la adición de un atributo "multiple" cuando el campo de entrada de archivos 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 ]
Atributo de aceptación
RFC 1867 también introdujo el acceptatributo para el inputelemento. Esto permitiría filtrar el tipo de archivo según el tipo MIME para el control de selección de archivos.
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 el atributo ACCEPT, el navegador podría restringir los patrones de archivo que se solicitan para que coincidan con aquellos que tengan las extensiones de archivo apropiadas para la plataforma.
De este modo, un agente de usuario puede restringir la selección de archivos, como por ejemplo en el siguiente caso, restringiéndola a imágenes GIF y PNG o a cualquier tipo de 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 solo mostraría archivos de los tipos especificados en el cuadro de diálogo de exploración 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, Internet Explorer 4, [ 7 ] Netscape Navigator 2.0 y Opera 3.5 [ 8 ] ya reconocían el inputelemento como type="file"un control de selección de archivos.
Sin embargo, la mayoría de los navegadores modernos todavía no implementan el control de selección de archivos como se pretendía, o carecen de ciertas características. [ 5 ]
No se pueden seleccionar varios archivos.
La carga de múltiples archivos mediante formularios 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 múltiples archivos a través de un único control de selección de archivos. Esto era 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 dejó de estar disponible. Firefox versión 3.6 comenzó a admitir la selección de múltiples archivos, [ 9 ] permitiendo al desarrollador un acceso limitado a los archivos antes de que se carguen al 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 múltiples archivos mediante el atributo multiple en los elementos input. [ 11 ]
Alternativa de JavaScript
Una solución consiste en usar scripts del lado del cliente, como JavaScript , para generar un control de selección de archivo adicional para cada archivo que el usuario seleccione para subir. Mediante CSS , se puede configurar para que estos controles de selección de archivo adicionales no se muestren. Un ejemplo de esta técnica se muestra en el plugin Multiple File Upload para jQuery . De esta forma, se resuelve el problema de la carga de múltiples archivos proporcionando tantos controles de selección de archivo como archivos tenga el usuario para subir. Sin embargo, esto no resuelve el problema de seleccionar varios archivos para subir en Internet Explorer.
Aceptar soporte de atributos
El atributo accept es compatible actualmente con Opera 11+, Chrome 16+, Safari 6+, Firefox 9+ y Microsoft Internet Explorer 10+.
Referencias
- ↑ "388784 – (CVE-2007-3511) Vulnerabilidad de robo de foco en la entrada de archivos de Firefox" . Bugzilla.mozilla.org . Consultado el 2 de septiembre de 2013 .
- ↑ "Vulnerabilidad de carga de archivos en el evento OnKeyDown de Mozilla Firefox" . Juniper.net. 15 de noviembre de 2010. Consultado el 2 de septiembre de 2013 .
{{cite web}}: CS1 maint: servicio de archivado obsoleto ( enlace ) - ↑ "Referencias de la 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 .
- 1 2 3 "Entrada de archivos (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. 22/07/2013 . Consultado el 02/09/2013 .
- 1 2 "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 múltiples archivos en Firefox 3.6 ✩ Mozilla Hacks – el blog para desarrolladores web" . Hacks.mozilla.org . Consultado el 2 de septiembre de 2013 .
{{cite web}}: CS1 maint: nombres numéricos: lista de autores ( enlace ) - ↑ "Uso de archivos desde aplicaciones web - MDC" . Developer.mozilla.org. 23 de agosto de 2013. Consultado el 2 de septiembre de 2013 .
- ↑ Especificación HTML 5.1: 4.10.5.3 Atributos comunes de los elementos de entrada
Enlaces externos
- Especificación del control de selección de archivos del W3C
- Carga de archivos con manejo de errores
- HTML