当前位置：网站首页 > 技术文章 > 正文

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

zhezhongyun 2024-12-13 17:14 31 浏览

介绍

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！

HTML 插件

上一篇：开源免费Emby中文字幕插件–Emby.MeiamSub
下一篇：11款创建图形和图表的JavaScript工具包

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

介绍

Github

适配框架

示例实现

功能概述

总结

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

接口测试遇到500报错?别慌，你的头部可能有点问题

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

关于HTML5被简称做H5，你怎么看?（html5缩写）

现在页面实时聊天都使用Websocket技术实现吗?