介绍

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！