摘要：本文作者这是推出的讲解开源项目系列，今天给大家推荐一个开源的文件上传库项目一介绍它是一个文件上传库。可以拖入上传文件，并且会对图像进行优化以加快上传速度。图片类型图像裁剪文件大小验证插件处理阻止太大的文件。
本文作者：HelloGitHub-kalifun
这是 HelloGitHub 推出的《讲解开源项目》系列，今天给大家推荐一个 JavaScript 开源的文件上传库项目——FilePond
一、介绍 1.1 FilePond它是一个 JavaScript 文件上传库。可以拖入上传文件，并且会对图像进行优化以加快上传速度。让用户体验到出色、进度可见、如丝般顺畅的用户体验。
FilePond 项目地址：https://github.com/pqina/file...1.2 特点和优势
上传内容：支持目录、文件、多个文件、本地路径、远程 URL 等。
文件管理：删除文件、选择文件、复制和粘贴文件、或使用 API 方式添加文件。
上传方式：使用 AJAX 进行异步上传、或将文件编码为 base64 数据用表单发送。
图像优化：自动调整图像大小、裁剪和修复 EXIF 方向。
响应式：可在移动和桌面设备上使用。
看了效果图和功能介绍，是不是有些手痒了。接下来就是实战操作部分，大家可以跟着文章一步步的把这个库使用起来，点亮你的文件上传技能点！
二、实战操作下面我们将一步步的讲解如何使用 FilePond 这个库。我们采用的是最简单的 CDN 引用方式，方便大家能够快速体检其魅力（复制代码便可查看效果），接着会深入讲解每个插件的功能，最终编写了一个组合了几个插件的示例及运行效果展示。
Tips： 解释说明均在代码中以注释方式展示，请大家注意阅读。
2.1 快速使用（CDN）示例代码：
FilePond from CDN
展示效果：
2.2 引入插件似乎单纯的上传功能是否无法满足我们的需求，FilePond 该库拥有多样、强大的插件部分，可以根据自己的需求选择插件组合起来使用哦。下面先简单的了解一下每个插件的功能：
File Rename：重命名客户端上的文件
File Encode：将文件编码为 base64 数据
File size Validation：文件大小验证工具
File Type Validation：文件类型验证工具
File Metadata：限制要添加的文件类型
File Poster：在文件项目中显示图像
Image Preview：显示图像文件的预览
Image Edit：手动编辑图像文件
Image Crop：设置图像文件的裁剪比例
Image Resize：设置图像文件的输出尺寸
Image Transform：上传之前在客户端上图像变换
Image EXIF Orientation：提取 EXIF 方向信息
Image Size Validation：限制要添加的图像的尺寸
Image Filter：将颜色矩阵应用于图像像素
下面我来介绍如何引入插件吧！
坑！： 使用插件前，一定要查阅清楚该插件是否有 CSS 文件，如果有请在标签中引入哦。
我们梳理一下引入插件的步骤：
引入 CSS 文件（部分插件有 CSS 文件）
引入 JS 文件
注册插件
配置插件（部分插件需配置）
2.3 配合插件使用完整示例代码：
FilePond from CDN
上面的示例展示了 FilePond 常用插件的方法，效果展示如下：
当然还有其它方法如：
destroys：销毁实例
find：返回附加提供的元素的实例
getOptions：返回当前的配置项
supported：鉴别浏览器是否支持 FilePond
这里就不做完整的讲解了，有兴趣的可以自行尝试使用这些方法。
三、总结以上就是讲解的全部内容，FilePond 是一款很轻便的上传插件。并没有太多繁琐的配置，这里我并没有逐一针对每个插件引入进行演示，只展示了常用的部分。留意上面提示的坑，掌握上面讲解的方法，其它的插件你便可自行学习。
FilePond 是一款很值得参考和使用的 JavaScript 库，如果想让自己网站快速加入上传功能，不妨试试它吧。
四、参考资料FilePond 官方文档
FilePond Plugins List
欢迎关注 HelloGitHub 公众号，获取更多开源项目的资料和内容
『讲解开源项目系列』启动——让对开源项目感兴趣的人不再畏惧、让开源项目的发起者不再孤单。跟着我们的文章，你会发现编程的乐趣、使用和发现参与开源项目如此简单。欢迎联系我们给我们投稿，让更多人爱上开源、贡献开源～
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/106891.html
摘要：开发教程步步为营，掌握基础技能发布机器学习速成课程为了帮助更多的人了解与学习机器学习相关的知识技能，发布了人工智能学习网站。更多相关内容参考数据科学与机器学习实战手册。 showImg(https://segmentfault.com/img/remote/1460000013586587); 前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热...
摘要：静态资源的访问通过配置代理实现页面的访问，跟服务端工程毫无关系，服务端只负责提供异步接口。集中管理异步接口配置的模块 Nicon 一言不合，先上平台Nicon。该平台接入github登录，采用七牛CDN存储，欢迎大家试用。 Nicon 是一个集图标上传、展示、使用于一身的字体图标管理平台，流程简单，符合日常开发使用习惯，适合企业在内部部署使用。采用 Iconfont 字体图标替换项目中...
摘要：静态资源的访问通过配置代理实现页面的访问，跟服务端工程毫无关系，服务端只负责提供异步接口。集中管理异步接口配置的模块 Nicon 一言不合，先上平台Nicon。该平台接入github登录，采用七牛CDN存储，欢迎大家试用。 Nicon 是一个集图标上传、展示、使用于一身的字体图标管理平台，流程简单，符合日常开发使用习惯，适合企业在内部部署使用。采用 Iconfont 字体图标替换项目中...
摘要：前言一个集微信公众号商城小程序商城商城后台的一个开源项目，后台是基于开发的，是一个简洁而强大的开源微信公众平台开发框架，微信功能插件化开发多公众号管理配置简单。微信小程序项目下载整个包之后，进行根目录文件夹。 前言 一个集微信公众号商城/小程序商城/商城后台的一个开源项目，后台是基于WeiPHP5.0开发的，WeiPHP是一个简洁而强大的开源微信公众平台开发框架，微信功能插件化开发,多...
摘要：前言一个集微信公众号商城小程序商城商城后台的一个开源项目，后台是基于开发的，是一个简洁而强大的开源微信公众平台开发框架，微信功能插件化开发多公众号管理配置简单。微信小程序项目下载整个包之后，进行根目录文件夹。 前言 一个集微信公众号商城/小程序商城/商城后台的一个开源项目，后台是基于WeiPHP5.0开发的，WeiPHP是一个简洁而强大的开源微信公众平台开发框架，微信功能插件化开发,多...
阅读 3242·2021-11-25 09:43
阅读 2058·2021-09-22 10:02
阅读 3182·2021-09-06 15:00
阅读 2245·2019-08-30 15:56
阅读 2318·2019-08-30 15:54
阅读 3165·2019-08-30 14:14
阅读 2232·2019-08-29 17:25
阅读 2877·2019-08-29 17:16
