Ve nuestra revisión de 7 de los mejores complementos de JavaScript y jQuery para implementar cargadores de archivos elegantes y útiles para su usuario.

Top 7: los mejores plugins de código abierto de JavaScript y jQuery para crear inputs de subida de archivos (File Uploader)

Hoy en día, casi todas las aplicaciones de administración requieren un componente de carga de archivos para cargar esos archivos del usuario en el servidor. De forma predeterminada, en todos los navegadores, la entrada del tipo de archivo es bastante fea, sin embargo, con JavaScript y CSS puede crear componentes hermosos. Si no puede crear uno por sí mismo o simplemente desea implementar un complemento para tenerlo disponible en segundos, hemos recopilado para usted 7 de los complementos de carga de archivos más utilizados disponibles para JavaScript. ¡Disfrútalas!

7. Cargador

Github

Uploader jQuery Plugin

Uploader es un complemento muy liviano para cargar archivos usando ajax (async) e incluye soporte para colas, seguimiento del progreso y arrastrar y soltar. Es muy configurable y fácil de adaptar a cualquier diseño de frontend, y muy fácil de trabajar junto con cualquier lógica de backend. El enfoque serán los navegadores modernos, pero también proporcionará un método para saber cuándo el complemento no es compatible. La idea es mantenerlo simple y liviano.

6. FineUploader

Github

Fineuploader

Fine Uploader es una de las bibliotecas de carga de archivos javascript más geniales y fáciles de configurar en un par de minutos. Los ejemplos de código se proporcionan en los documentos oficiales, ya sea que esté utilizando un contenedor jQuery o Vanilla JavaScript. Solo necesita incluir un archivo CSS, un archivo JavaScript y manejar las cargas en el lado del servidor de acuerdo con la tecnología que esté utilizando. No hay absolutamente ninguna otra dependencia. Ofrece múltiples complementos de carga de archivos con vistas previas de imágenes, arrastrar y soltar, barras de progreso. Compatibilidad con S3 y Azure, escalado de imágenes, compatibilidad con formularios, fragmentación, reanudación, pausa y muchas otras funciones. 

5. Carga de archivos jQuery

Github

Carga de archivos jQuery

jQuery File Upload es un complemento de jQuery que le permite implementar un widget con selección de archivos múltiples, soporte para arrastrar y soltar, barras de progreso, validación y vista previa de imágenes, audio y video. Admite la carga de archivos entre dominios, fragmentados y reanudables y el cambio de tamaño de imágenes del lado del cliente. Funciona con cualquier plataforma del lado del servidor (PHP, Python, Ruby on Rails, Java, Node.js, Go, etc.) que admita la carga de archivos de formulario HTML estándar.

4. Filepond

Github

Filepond

Filepond es una biblioteca de JavaScript que puede cargar cualquier cosa que le arroje, optimiza imágenes para cargas más rápidas y ofrece una experiencia de usuario excelente, accesible y fluida como la seda. La biblioteca principal está escrita en JavaScript vanilla y, por lo tanto, se puede usar en todas partes. Filepond acepta directorios, archivos, blobs, URL locales, URL remotas y URI de datos. Puede enviar archivos al servidor usando XMLHttpRequest o almacenar y enviar con la publicación del formulario como base64 usando el complemento File Encode.

3. Entrada de archivo por Krajee

Github

Entrada de archivo Krajee

La biblioteca de entrada de archivos de Krajee es una entrada de archivo HTML 5 mejorada para Bootstrap 3.x con vista previa de archivos para varios archivos, ofrece selección múltiple y más. El complemento le permite una forma sencilla de configurar un selector de archivos avanzado / control de carga creado para funcionar especialmente con los estilos Bootstrap CSS3. Mejora aún más la funcionalidad de entrada de archivos al ofrecer soporte para previsualizar una amplia variedad de archivos, es decir, imágenes, texto, html, video, audio, flash y objetos. Además, incluye cargas basadas en AJAX, arrastrar y soltar archivos, ver el progreso de la carga y previsualizar, agregar o eliminar archivos de forma selectiva. El complemento ofrece varios temas, incluido el tema del explorador:

Cargador de archivos Krajee Fileinput

2. Uppy

Github

Cargador de archivos Uppy

Uppy es un cargador de archivos modular y elegante que se integra a la perfección con cualquier marco JS. Obtiene archivos del disco local, Google Drive, Dropbox, Instagram, URL remotas, cámaras y otras ubicaciones interesantes, y luego los carga en el destino final. Es rápido, fácil de usar y le permite preocuparse por problemas más importantes que la creación de un cargador de archivos. Uppy es traído a usted por las personas detrás de Transloadit y, como tal, tendrá soporte de primera clase para agregar su backend de carga y codificación, pero esto es opt-in, y puede usar el suyo con la misma facilidad.

1. Dropzone

Github

Cargador de archivos Dropzone

Hay varios temas de Dropzone.js con una experiencia de usuario completamente diferente. Es una demostración bastante útil de las poderosas posibilidades de configuración de Dropzone.js, por lo que puede hacer que Dropzone.js se vea exactamente como desea que se vea y es muy fácil de hacer, por ejemplo, con un tema Bootstrap:

Tema Bootstrap Dropzone

Si conoce otro impresionante componente de carga de archivos de código abierto escrito en VanillaJS o jQuery, compártalo con la comunidad en el cuadro de comentarios.


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores