Web端非常有用的一个文件上传插件——FilePond
介绍
FilePond是一个JavaScript库,它提供流畅的拖放文件上传功能。可以上传任何你扔在它上面的东西,优化图像以便更快地上传,并提供一个非常优雅的、可靠的、平滑的用户体验。
Github
基于MIT开源协议
https://github.com/pqina/filepond
适配框架
核心库是用普通JavaScript编写的,因此可以在任何地方使用。可以在不同的框架中使用,提供了React、Vue、Svelte、Angular、jQuery。你可以选择和自己项目一致框架的适配库
示例实现
<input type="file" class="filepond" name="filepond" multiple data-allow-reorder="true" data-max-file-size="3MB" data-max-files="3">
FilePond.registerPlugin( FilePondPluginImagePreview, FilePondPluginImageExifOrientation, FilePondPluginFileValidateSize, FilePondPluginImageEdit ); FilePond.create( document.querySelector('input'), // 使用 Doka.js 作为图像编辑器 imageEditEditor: Doka.create({ utils: ['crop', 'filter', 'color'] }) );
- 将multiple属性添加到文件输入以创建多文件放置区域。
- 使用data max files属性限制文件的最大数量。
- 拖放图像,FilePond将呈现快速预览。它还可以修正手机照片定位信息。
- 文件可以重新排序,抓取一个文件并将其拖到新的位置。
功能概述
- 多种输入格式
支持目录、文件、blob、本地url、远程url和数据uri。
- 多个文件源
删除文件、从文件系统中选择文件、使用API添加文件或复制和粘贴文件。
- 异步或同步上传
使用XMLHttpRequest或store将文件发送到服务器,并使用File Encode插件将表单post作为base64提交。
- 高可靠度
用AT软件如VoiceOver和JAWS进行测试。FilePond的用户界面可以通过键盘导航。
- 响应式
自动缩放到可用空间。在移动和桌面设备上都可以使用。
- 还支持以下更多特性
拖放以重新排列文件
修改标签和图标
多文件或单文件模式
从丢弃的文件夹中筛选文件
还原临时服务器文件
捕获页上丢弃的文件
删除时上载或等待用户操作
限制跌落区域高度
删除以替换当前文件
复制粘贴文件
向文件添加元数据
使用插件扩展FilePond
限制输入文件大小
限制所有文件的总大小
限制可以添加的文件类型
显示图像文件的预览
按固定比例裁剪图像
调整图像大小以适合边界框
强制将图像调整为特定大小
在客户端上应用图像转换
压缩JPEG图像
将图像转换为JPEG或PNG
信息读取方向图像
Base64编码文件
总结
FilePond是一个值得尝试的工具,在文件上传体验上比很多第三方插件好得多,而且功能不俗,enjoy it!