<INPUT type="file"> múltiple en HTML 5

[ecarlevaro]

Navegando el otro día por la documentación de PHP, encontré un comentario sobre una novedad de HTML 5 que me pareció de más util y que en Foros del Web no he encontrado nada parecido.

En HTML 5, se pueden crear etiquetas <input> de tipo file para subir archivos, pero múltiples, es decir, en una sola caja el usuario puede seleccionar varios archivos cuando se le abre la ventana Abrir al hacer click en Examinar. Para esto se usa el atributo mutiple="true".

Código HTML:

<input type="file" mutliple="true" name="archivos" />
 

Tener en cuenta que no todos los navegadores soportan esta funcionalidad, por ahora desde Mozilla Firefox 3.6 en adelante y Google Chrome 10 funciona.

Para un caso particular que tenía de un cliente que desde el backend subía 50 imágenes, una por una, esta novedad de HTML 5 es un gran avance y le ahorra mucho tiempo al cliente. Claro antes teníamos soluciones con archivos ZIP o meterle mano a Java, pero ciertamente los archivos ZIP los debía crear el cliente en su PC y a Java... hay que aprenderlo.

Accediendo desde el DOM
Desde JavaScript para acceder a las propiedades de los archivos seleccionados en el <input> usamos:

Código Javascript:

var nombreArchivo = document.getElementById("nombreDel Input").files[i].name
 

si queremos acceder al nombre del archivo que el usuario ha seleccionado. Donde i es un integer, ya que files es un array.

Accediendo desde el server con PHP.
Con PHP la historia no cambia mucho, la superglobal $_FILES tendrá todos los archivos donde cada clave corresponde al atributo name que le dimos en el HTML a cada input.
Si tenemos un input:

Código HTML:

<input type="files" mutliple="true" name="imagenes[]" />
 

Desde PHP la matriz $_FILES será, $_FILES['imagenes']['name'][$a] donde ['name'] puede ser size, type, tmp_name o error y $a es el número de la imagen cargada.

Como se ve, es bastante engorroso la forma de organizar de PHP a $_FILES, porque por cada propiedad de la imagen, nombre, tamaño, tipo, etc, crea una clave con los datos de las imágenes, en vez de ser cada clave una imagen con todas esas propiedades es decir, $_FILES['imagenes'][$a]['name']. De todas formas se pueden recorrer todas las imágenes o archivos con un while o con dos foreach, uno dentro de otro.

Para quienes quieran profundizar sobre el DOM de esta novedad:
http://www.w3schools.com/html5/html5...attributes.asp
https://developer.mozilla.org/en/DOM/Input.multiple
https://developer.mozilla.org/en/DOM/FileList

Recuerden que no todos los navegadores implementan esto, por ahora que yo conozca Mozilla Firefox 3.6 en adelante y Google Chrome 10.0 en adelante.

[mostaza4]

el atributo es "multiple", dice mutlipe. Pero Gracias me recontra re mi re sirvio!