File API de html5

Hasta la llegada de HTML5 era imposible realizar operaciones con los ficheros de un formulario, como por ejemplo:

• Conocer el tamaño de un fichero y el tipo antes de ser enviado para poder realizar validaciones sin necesidad de enviarlo.
• Poder seleccionar más de un fichero en un mismo input file.
• Usar drag & drop para adjuntar un fichero a un formulario.

Miento, si había formas, pero todas ellas pasaban por usar otro tipo de elementos como por ejemplo, flash o applet de java

Con HTML5 disponemos de una nueva api con la que poder trabajar con los ficheros seleccionados en un formulario. En concreto disponemos de las siguientes funciones:

• File: Nos permite acceder a información de un fichero individual como es el nombre, el tamaño, el mimetype o una referencia un manejador del fichero.
• FileList: Nos permite las mismas acciones que File pero aplicadas a una lista de ficheros. Se utiliza cuando usamos un <input type="file" multiple>.
• Blob: Nos permite cortar un fichero por rango de bytes. (Este todavía no lo he podido probar)

Como casi siempre en HTML5 no todos los navegadores soportan actualmente estas api, en principio las últimas versiones de Firefox, Chrome y Opera no tendremos problemas, pero si en Internet Explorer y Safari.

Para saber si el navegador del cliente soporta estas api podemos usar el código:

if (window.File && window.FileReader && window.FileList && window.Blob) {
  // Todas las APIs soportadas.
} else {
  alert('La API de FILE no es soportada en este navegador.');
}

A modo de ejemplo tenéis el siguiente código que muestra en un div la lista de todos los ficheros seleccionado y la información asociada a él.

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                  '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

Espero que os sea útil. Yo ya le he encontrado alguna funcionalidad como por ejemplo, validar un formulario antes de ser enviado y mostrar por pantalla el tamaño del formulario que se va a enviar para calcular el tiempo medio de espera.