介绍

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

Github

基于MIT开源协议

https://github.com/pqina/filepond

适配框架

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

示例实现

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！

input上传文件夹第二次时删除第一次_Web端非常有用的一个文件上传插件——FilePond...相关推荐

计算机不能再U盘新建文件夹,如何让你的U盘永不中毒？新建一个文件夹就搞定！-u盘文件夹变成exe...
由于U盘携带方便,很多人都会用来存储重要文件.音乐或是视频等等.不过在使用过程中,有时候一不小心就会遇到U盘中毒的情况,这也给用户带来了不少困扰.其实与其等到发现U盘中毒之后再去找U盘杀毒工具解决,还 ...
python opencv 实现从一个文件夹中读取图片做切割处理后放入另一个文件夹
python opencv 实现从一个文件夹中读取图片切割处理后放入另一个文件夹. 实现的功能是把一个文件夹里的图片作处理,即把原图片中心为起点切割成1536*1536的图片,原图片必须大于这个的大小 ...
Python解决：当文件夹存在时清空文件夹，文件夹不存在时新建文件夹
import osif os.path.exists('./存放数据的文件夹'): # 当文件夹存在时清空文件夹shutil.rmtree('./存放数据的文件夹/', True) else: # 当 ...
vb在服务器上新建文件夹,vb.net-如果不存在，如何在VB中创建文件夹？
vb.net-如果不存在,如何在VB中创建文件夹? 我为自己编写了一个小小的下载应用程序,以便我可以轻松地从服务器上获取一组文件,然后将它们全部放入带有全新安装的Windows的新PC上,而无需实际运 ...
epic启动器在哪个文件夹_启动时|原神启动器在哪？启动器文件位置介绍_234游戏网...
原神启动器在哪?在游戏推出新版本之后,玩家登录游戏时,会发现无法顺利进入其中,系统会提示你,需要打开启动器来进行版本的更新而这也触及到了大家的知识盲区,对于启动器自己平时并未有任何的了解,如今自然也 ...
使用idea导入文件夹作为项目时，在项目中的文件夹可能会被隐藏
2019独角兽企业重金招聘Python工程师标准>>> 问题:使用idea导入文件夹作为项目时,有些项目目录下的文件夹或文件可能会被隐藏掉,如图1-1所示 1-1 所造成的原因是 ...
对文件或文件夹进行删除、移动、windows10重命名等操作时，系统可能提示“操作无法完成，因为其中的文件夹已在另一程序中打开，请关闭该文件或文件夹，然后重试
我们在windows10中对文件或文件夹进行删除.移动.重命名等操作时,系统可能提示"操作无法完成,因为其中的文件夹已在另一程序中打开,请关闭该文件或文件夹,然后重试.",遇到这种 ...
epic启动器在哪个文件夹_启动时|原神启动器在哪个文件中启动器文件位置一览_234游戏网...
原神手游中启动器在哪个文件中呢?游戏即将进行全新的版本更新,在本次的版本更新后,玩家想要打开游戏就必须打开启动器才能够获取全新的版本,但是很多玩家不知道启动器的具体位置,也不知道在哪个文件中找,接下来 ...
android 卸载残留代码,安卓手机怎么彻底清除卸载残留文件夹？如何彻底删除安卓手机上的残留软件[多图]...
小伙伴们在清理手机垃圾的时候会出现卸载的软件还留有没用的文件夹,但也不知道哪个文件是否能删除.是否有用,不知道哪些是没用的垃圾,并且还会占用很多的内存.接下来就由果粉客为大家详细介绍下安卓手机彻底清除 ...

input上传文件夹第二次时删除第一次_Web端非常有用的一个文件上传插件——FilePond...

介绍

Github

适配框架

示例实现

功能概述

总结

input上传文件夹第二次时删除第一次_Web端非常有用的一个文件上传插件——FilePond...相关推荐

最新文章

热门文章