html5文件上传插件（网页上传插件）

介绍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']  }));

功能概述

支持目录、文件、blob、本地url、远程url和数据uri。

删除文件、从文件系统中选择文件、使用API添加文件或复制和粘贴文件。

使用XMLHttpRequest或store将文件发送到服务器，并使用File Encode插件将表单post作为base64提交。

用AT软件如VoiceOver和JAWS进行测试。FilePond的用户界面可以通过键盘导航。

自动缩放到可用空间。在移动和桌面设备上都可以使用。

拖放以重新排列文件

修改标签和图标

多文件或单文件模式

从丢弃的文件夹中筛选文件

还原临时服务器文件

捕获页上丢弃的文件

删除时上载或等待用户操作

限制跌落区域高度

删除以替换当前文件

复制粘贴文件

向文件添加元数据

使用插件扩展FilePond

限制输入文件大小

限制所有文件的总大小

限制可以添加的文件类型

显示图像文件的预览

按固定比例裁剪图像

调整图像大小以适合边界框

强制将图像调整为特定大小

在客户端上应用图像转换

压缩JPEG图像

将图像转换为JPEG或PNG

信息读取方向图像

Base64编码文件

总结

FilePond是一个值得尝试的工具，在文件上传体验上比很多第三方插件好得多，而且功能不俗，enjoy it！

上面就是小居数码小编今天给大家介绍的关于（网页上传插件）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。

94%的朋友还想知道的：

• cad批量打印插件哪个好用（CAD批量打印软件免费）
• cad画图超快用的什么插件（cad有哪些提高效率的插件）
• blenderm3插件教程（blender软件m3插件安装）
• 浏览器插件如何开发教程（浏览器插件怎么开发）

（569）个朋友认为回复得到帮助。