7个最佳开源JavaScript和jQuery File Upload插件

本文概述

• 7. Uploader
• 6. FineUploader
• 5. jQuery File Upload
• 4. Filepond
• 3. File Input By Krajee
• 2. Uppy
• 1. Dropzone

如今, 几乎每个管理应用程序都需要一个文件上传组件才能将用户的那些文件加载​​到服务器。默认情况下, 每个浏览器上的文件类型输入都很难看, 但是使用JavaScript和CSS可以创建漂亮的组件。如果你无法独自创建一个插件, 或者只是想实现一个插件以在数秒内可用, 那么我们为你收集了7个可用于JavaScript的最常用的文件上传器插件。享用它们 ！

7. Uploader

Github

Uploader是一个非常轻量级的插件, 用于使用ajax(async)上传文件, 并包括对队列, 进度跟踪和拖放的支持。它是非常可配置的, 易于适应任何前端设计, 并且很容易与任何后端逻辑一起使用。重点将放在现代浏览器上, 但也提供一种方法来知道何时不支持该插件。这个想法是使其保持简单和轻巧。

6. FineUploader

Github

Fine Uploader是几分钟内即可建立的最酷, 最简单的javascript文件上传器库之一。无论你使用的是jQuery包装器还是Vanilla JavaScript, 官方文档中都提供了代码示例。你只需要包括一个CSS文件, 一个JavaScript文件, 并根据所使用的技术在服务器端处理上载。绝对没有其他依赖项。它提供了带有图像预览, 拖放, 进度条的多个文件上传插件。 S3和Azure支持, 图像缩放, 表单支持, 分块, 恢复, 暂停以及大量其他功能。

5. jQuery File Upload

Github

jQuery File Upload是一个jQuery插件, 可让你实现具有多个文件选择, 拖放支持, 进度条, 验证和预览图像, 音频和视频的小部件。支持跨域, 分块和可恢复的文件上传以及客户端图像大小调整。与支持标准HTML表单文件上传的任何服务器端平台(PHP, Python, Ruby on Rails, Java, Node.js, Go等)一起使用。

4. Filepond

Github

Filepond是一个JavaScript库, 可以上传你扔给它的任何内容, 优化图像以加快上传速度, 并提供出色的, 可访问的, 柔滑的用户体验。核心库使用普通JavaScript编写, 因此可以在任何地方使用。 Filepond接受目录, 文件, blob, 本地URL, 远程URL和数据URI。 Zou可以使用XMLHttpRequest将文件发送到服务器, 也可以使用File Encode插件存储并提交表单post作为base64。

3. File Input By Krajee

Github

Krajee的File Input库是Bootstrap 3.x的增强型HTML 5文件输入, 具有针对各种文件的文件预览, 提供多种选择等功能。该插件使你可以通过一种简单的方法来设置高级文件选择器/上载控件, 该控件专门为与Bootstrap CSS3样式配合使用而构建。通过提供对预览各种文件(即图像, 文本, html, 视频, 音频, flash和对象)的支持, 它进一步增强了文件输入功能。此外, 它还包括基于AJAX的上传, 拖放文件, 查看上传进度以及有选择地预览, 添加或删除文件。该插件提供了多个主题, 包括资源管理器主题：

2. Uppy

Github

Uppy是一个时尚的模块化文件上传器, 可与任何JS框架无缝集成。它从本地磁盘, Google云端硬盘, Dropbox, Instagram, 远程URL, 相机和其他令人兴奋的位置获取文件, 然后将它们上传到最终目的地。它快速, 易于使用, 让你担心比构建文件上传器还要重要的问题。 Uppy由Transloadit背后的人员提供给你, 因此将为添加他们的上传和编码后端提供一流的支持, 但这是选择加入的, 你也可以轻松地自己滚动。

1. Dropzone

Github

Dropzone.js的多个主题具有完全不同的用户体验。这是Dropzone.js强大配置可能性的非常有用的演示, 因此你可以使Dropzone.js看起来完全像你想要的样子, 并且非常容易做到, 例如使用Bootstrap主题：

如果你知道使用VanillaJS或jQuery编写的另一个很棒的开源文件上传组件, 请在注释框中与社区共享。