Upload de archivos utilizando HTML5 + jQuery

Desde la aparición de HTML5 en el escenario del desarrollo web muchas cosas cambiaron para siempre, una de ellas es la forma en que conocemos la subida de archivos a la web. Esto es justamente lo que queda en evidencia con Upload Center.

Upload Center es un script que combina varias plataformas de desarrollo distintas, por un lado HTML5, y por otro jQuery, este ultimo es el que se encarga de la gestión y transmisión de archivos utilizando AJAX.

El funcionamiento de Upload Center es el siguiente:

  • El usuario arrastra y suelta el archivo en el área destinado para ello. Esto lo logra mediante el uso de la API del navegador.
  • Utilizando la API de File Reader el navegador lee el archivo, lo almacena en memoria y lo ingresa en una lista binaria.
  • Finalmente utilizando el nuevo metodo sendAsBinary se envía el archivo al servidor.

El proceso si bien es complicado es a la vez mucho más simple que el que se utiliza generalmente para realizar la subida de un archivo de forma convencional. Actualmente Upload Center funciona muy bien en solamente dos navegadores, Chrome y Firefox, lo más probable es que en un futuro no muy lejano este script se pueda adaptar al resto de los navegadores.

Upload de imagenes utilizando html5 y jQuery

El funcionamiento completo de este script pueden leerlo desde la web oficial del autor. Pueden ver una demostración en linea.

A mi entender, y de de cara al usuario este tipo de formularios de upload resultan mucho más simples que los convencionales, el proceso completo puede comprenderse en apenas unos segundos, al ser indicado el progreso de la subida el dinamismo aumenta impactando muy positivamente en la experiencia del usuario.

Web: Upload Center

Categorizado en: