Subscribe

viernes, 29 de junio de 2012

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.


14 comentarios:

Anónimo dijo...

amigo como es que se hace esto

Protox dijo...

Muy buen blog.... muy util para los que empiezan

geetha dijo...

wonderful information, I had come to know about your blog from my friend nandu , hyderabad,i have read atleast 7 posts of yours by now, and let me tell you, your website gives the best and the most interesting information. This is just the kind of information that i had been looking for, i'm already your rss reader now and i would regularly watch out for the new posts, once again hats off to you! Thanks a ton once again, Regards, Html5 online trainingamong the Html5 in Hyderabad. Classroom Training in Hyderabad India

Lalit jain dijo...

very nice post HTML5 Web Development

HTML5 is the next generation and fifth version of HTML technology for content-rich website development.HTML5 is the latest addition to the World

Wide Web.
Our experience in HTML5 development empowers us to take up challenging project and deliver promising results with utmost perfection.

Juan Carlos Fernández Prior dijo...
Este comentario ha sido eliminado por el autor.
Juan Carlos Fernández Prior dijo...
Este comentario ha sido eliminado por el autor.
Juan Carlos Fernández Prior dijo...

Si quieres aprender html5 y CSS3 os dejo un artículo muy completo para aprender a crear un formulario de contacto:
http://informaticayfinanzas.blogspot.com/2014/01/como-hacer-un-formulario-de-contacto.html

psd to html dijo...

Nicely written post.

SiliconIT Hub dijo...

Responsive HTML5 Web design has the solution. The conception behind the amalgam of JavaScript, CSS and CSS3 is to build the flowing website design which is capable to contract, expand, remove or rearrange with user's screen size accordingly and become accessible on all internet devices.

onlinetrainings expert dijo...

thanks for your posting ...............

online trainings

itabhyas dijo...
Este comentario ha sido eliminado por el autor.
Shadow Technology dijo...


We at Spark square measure committed to impact the productivity of our shoppers through our distinct coaching methodologies, tailored content and delivery systems. We interact with our shoppers to supply finish to finish Learning and Development solutions and thereby supply support to boost their sales productivity, distribution network, method and compliance, ways that of operating, client expertise and supply pre-hire solutions.Visit: HR Training in India

Seo Avid dijo...

I was able to find good information from your blog posts.

HTML5 Development

Vamshi Krishna dijo...

Hai Author Good Information that i found here,do not stop sharing and Please keep updating us..... Thanks

Publicar un comentario