FilePond–Web端非常有用的一个文件上传插件

Vedu • 2020-11-22 07:18 • 资源分享 • 阅读 2154

介绍

FilePond是一个JavaScript库，它提供流畅的拖放文件上传功能。可以上传任何你扔在它上面的东西，优化图像以便更快地上传，并提供一个非常优雅的、可靠的、平滑的用户体验。

Github

基于MIT开源协议

https://github.com/pqina/filepond

适配框架

核心库是用普通JavaScript编写的，因此可以在任何地方使用。可以在不同的框架中使用，提供了React、Vue、Svelte、Angular、jQuery。你可以选择和自己项目一致框架的适配库

示例实现

"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！

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/share/15353.html

FilePond–Web端非常有用的一个文件上传插件

介绍

Github

适配框架

示例实现

功能概述

总结

相关推荐

发表评论