jQuery AJAX mejora la funcionalidad de tu sitio web html5 con el mínimo de código y esfuerzo. Los sitios web desarrollados con HTML5 están ganando mucho interés entre los desarrolladores web en estos días por lo que para la creación de nuevos sitios web funcionales es importante  tener una ventaja sobre la competencia.

jQuery tiene compatibilidad con varios navegadores, por lo que ahora es muy fácil integrar el código ajax con jQuery. Ajax cargará todos los script de forma asincrónica y en tiempo real, para hacer la interacción del lado del cliente sin que la  página se vuelva a cargar. Esta es la razón por la cual jQuery ajax se hizo tan popular en los últimos años. Si no estás al tanto de dónde se está usando ajax, los ejemplos son Facebook, Google, youtube, etc.

Algunos sitios web  requieren una gran cantidad de archivos para ser cargados por sus miembro registrados o por el propio webmaster; cargar archivos en tu sitio web manualmente a través de FTP puede ser una  no tan simple, es por eso que la implementación de formularios con jQuery Ajax en HTML se ha vuelto muy importante. Simplemente agrega el código del script en la página HTML y verás un hermoso que plugin permite a los usuarios seleccionar los archivos que desea cargar.

Se de la importancia de elegir el script correcto que te permita subir archivos a tu servidor web, es por ello que me di la tarea  de buscar en Internet dichos Script y listarlos a continuación:

1- Mini AJAX File Upload Form

Este es  mini formulario de carga muy sencillo, pero funcional.  Este script le permitirá a los visitantes subir archivos de sus navegadores con la funcionalidad arrastrar/soltar o seleccionándolos individualmente. Para este propósito,  se ha usado el potente plugin jQuery File Upload.

Características

• Carga de archivos múltiples
• Cargas simultáneas
• Sube cualquier cosa.
• Arrastrar y soltar
• No se usó Flash
• Responsive, se adapta a todos los dispositivos móviles.
• Barra de progreso limpia
• Cancelar en cualquier momento
• El tutorial para la implementación está disponible en la pagina del autor
• Script gratuito.

Si bien este script tiene varios desde su publicación en la pagina web del autor, pero considero que aun es funcional, ya que lo he descargado y probado en mi servidor local, y ha funcionado de maravilla.

DEMOSTRACIÓN DESCARGAR ARCHIVOS

2- Dropzone JS

Un ligero complemento de jquery para cargar archivos fácilmente y así facilitar la integración en tu sitio web. Repasa la enorme lista de características que tiene este complemento,  este complemento está bien documentado.

Características

• Diseño Responsive
• Cargas simultaneas
• Todos los formatos de archivos compatibles
• Vista previa de la imagen
• Opciones de cancelar y eliminar archivos
• Arrastrar y soltar
• Carga secuencial
• Script / plugin gratuito

DEMOSTRACIÓN DESCARGAR ARCHIVOS

3- jQuery File Upload

DEMOSTRACIÓN DESCARGAR ARCHIVOS

4- Fine Uploader

Herramienta desarrollada con Javascript para brindar a sus usuarios una experiencia fluida al cargar archivos a su sitio web. Fine Uploader tiene como objetivo posibilitar la carga de archivos en la web en todos los navegadores y dispositivos móviles. Es cross-browser, libre de dependencias y 100%  desarrollado con Javascript.

Características

• Arrastrar y soltar archivos
• Activar / desactivar vista previa de imagen
• Limitar el tamaño del archivo
• No permitir ciertos formatos de archivo
• Limitar el número de elementos múltiples que se cargarán.
• Barra de progreso HTML
• Sube directamente al almacenamiento de Amazon S3.
• Mensaje de error con ventana emergente
• Archivos de cola
• Subidas instantáneas
• Lista plana de archivos cargados sin vista previa.
• Opción para cargas basadas en iframes.
• Descarga gratuita

DEMOSTRACIÓN DESCARGAR ARCHIVOS

5- Plupload

Utiliza cualquier tipo de formulario con opciones de carga de archivos, ya que este script puede integrarse fácilmente en tu sitio web desarrollado con HTML5. Las imágenes se redimensionan y recortan en el tamaño total de los archivos, lo que también ahorra el ancho de banda total.

Características

• Agregar varios archivos
• Barra de progreso basada en flash
• Cambiar el tamaño de la imagen sobre la marcha
• Archivos en cola
• Botón Enviar para cargar archivos.
• Mensaje de error para formatear otros que no sean imágenes.
• Detener carga en cualquier momento
• Tamaño total del archivo
• Script gratuito

DEMOSTRACIÓN DESCARGAR ARCHIVOS

6- Uploadify HTML5 File Upload jQuery Script

Un script totalmente personalizable para facilitar el proceso de carga de archivos. Con este plugin de jQuery podrás agregar fácilmente múltiples funciones de carga de archivos a tu sitio web. Este plugins tiene dos versiones; 1 de pago y otra gratuita, así que puedes elegir la que mejor se adapte a tus necesidades.

Características

• Varias cargas de archivos
• Arrastrar y soltar
• Barras de progreso en tiempo real
• Especificar restricciones para el archivo
• Soporte premium
• La versión HTML5 cuesta 5 $

DEMOSTRACIÓN DESCARGAR ARCHIVOS

7-  HTML5 File Uploads with jQuery

Este plugins te permitirá  subir fotos desde tus computadoras arrastrándolas y soltándolas en la ventana del navegador. Las fotos tendrán una vista previa y una barra de progreso, todas ellas controladas por el lado del cliente. Actualmente, las fotos solo se almacenan en una carpeta en el servidor, pero puedes mejorarlas como quieras.

Características

• Interfaz mínima de arrastrar y soltar
• Barra de progreso HTML
• Sin botones enviar
• Carga instantánea de imágenes
• Solo imágenes son permitidas
• Solo es compatible con Chrome y Firefox.
• Vista previa de imágenes.
• Script gratuito

DEMOSTRACIÓN DESCARGAR ARCHIVOS

Bien, este sería mi listado de los 7 mejores plugins jQuery para cargar archivos, si deseas agregar mas a este listado por favor hazme saber dejando un comentario sobre el plugin.

Si esta información te resultó útil, por favor comparte en tus perfiles sociales, eso me ayudará a seguir creando contenido como este 😀