介绍
fileponds是一个JavaScript库,提供了流畅的拖放文件上传功能。你可以上传你扔在上面的任何东西,优化图像以加快上传速度,并提供非常优雅、可靠和流畅的用户体验。
00-1010基于MIT开源协议
https://github.com/pqina/filepond
Github
核心库是用普通JavaScript编写的,所以可以在任何地方使用。它可以在不同的框架中使用,提供React、Vue、Svelte、Angular和jQuery。您可以选择与项目框架相同的适配器库。
适配框架
输入类型=“文件”class='filepond '
名称=“文件池”
多个的
数据-允许-重新排序='真'
数据最大文件大小='3MB '
data-max-files=' 3 ' filepend . register plugin(
文件本地插件最小化预览,
文件本地插件最小化导入方向,
FilePondPluginFileValidateSize,
文件本地插件最小化编辑
);
文件池. create(
document.querySelector('input '),
//使用Doka.js作为图像编辑器
imageediteditor : Doka . create({ 0
utils: ['裁剪','滤镜','颜色']
})
);将多重属性添加到文件输入以创建多文件放置区域。使用data max files属性来限制文件的最大数量。拖放图像,文件池将呈现快速预览。还可以修正手机照片的位置信息。您可以重新排序文件,抓取文件并将其拖到新位置。
00-1010多种输入格式支持目录,文件,blob,本地网址,远程网址和数据URIs。
多个文件源删除文件,从文件系统中选择文件,使用应用编程接口添加文件,或者复制和粘贴文件。
或者异步同步上传,使用XMLHttpRequest或store将文件发送到服务器,使用File Encode插件将表单帖子提交为base64。
高可靠性由AT软件如VoiceOver和JAWS进行测试。文件池的用户界面可以通过键盘进行导航。
对可用空间的响应性自动缩放。它可以在移动和桌面设备上使用。
拖放以重新排列文件还支持以下附加功能。
修改标签和图标
多文件或单文件模式
从丢弃的文件夹中过滤文件
还原临时服务器文件
捕获页面上丢弃的文件
删除时上传或等待用户操作。
限制降落区的高度
删除以替换当前文件。
复制并粘贴文件
向文件添加元数据
使用插件扩展文件池
输入文件大小限制。
限制所有文件的总大小
限制可以添加的文件类型
显示图像文件的预览。
以固定比例裁剪图像。
调整图像大小以适合边界框。
强制将图像调整到特定大小
在客户端上应用图像转换
压缩JPEG图像
将图像转换为JPEG或PNG
信息读取方向图像
Base64编码文件