js提取指定网站内容(《讲解开源项目》[1]系列之FilePond手痒有些)

　　js提取指定网站内容(《讲解开源项目》[1]系列之FilePond手痒有些)

　　这是HelloGitHub推出的“解释开源项目”[1]系列。今天给大家推荐一款。

　　JavaScript 开源文件上传库项目——FilePond

　　一、简介

　　1.1 文件池

　　它是一个 JavaScript 文件上传库。可以拖入上传，并优化图像以加快上传速度。为用户提供出色、可见、流畅的文件上传体验。

　　FilePond项目地址：

　　1.2 特点和优势

　　看了效果图和功能介绍，是不是有点痒？接下来是实际操作部分。你可以跟着文章一步步使用这个库，点亮你的文件上传技能点！

　　

　　实战操作

　　下面我们将逐步解释如何使用 FilePond 库。我们使用最简单的CDN参考方式，方便大家快速查看它的魅力（复制代码看效果），然后深入讲解各个插件的作用，最后结合几个插件写一个例子运行显示结果.

　　提示：解释以注释的形式显示在代码中，请仔细阅读。

　　2.1 快速使用（CDN）

　　示例代码：

　　

FilePond from CDN

​

​

​

​

​

​

// FilePond.parse 使用类.filepond解析DOM树的给定部分，并将它们转换为FilePond元素。

FilePond.parse(document.body);

​

​

　　结果显示：

　　

　　2.2

　　引入插件

　　看来简单的上传功能无法满足我们的需求。FilePond 库有各种强大的插件部件。您可以根据自己的需要选择和组合插件。我们先简单了解一下各个插件的作用：

　　现在让我介绍如何引入插件！

　　坑！: 使用插件前，一定要检查插件是否有CSS文件，如果有，请在标签中引入。

　　

​

​

// 注册插件 FilePondPluginImagePreview 图像预览插件为已上传的图像呈现缩小的预览。

FilePond.registerPlugin(FilePondPluginImagePreview);

　　下面我们来梳理一下引入插件的步骤： 引入CSS文件（部分插件有CSS文件） 引入JS文件注册插件 配置插件（部分插件需要配置）

　　2.3 与插件一起使用

　　完整的示例代码：

　　

FilePond from CDN

​

​

​

​

​

// querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。

var inputElement = document.querySelector('input[type="file"]');

​

// 注册插件

// FilePondPluginImagePreview 上传时可以预览到上传的图片等

// FilePondPluginImageEdit 由于doka收费，所以编辑功能就不演示了。

// FilePondPluginFileValidateType 图片类型

// FilePondPluginImageCrop 图像裁剪

// FilePondPluginFileValidateSize 文件大小验证插件处理阻止太大的文件。

FilePond.registerPlugin(

FilePondPluginImagePreview,

FilePondPluginImageEdit,

FilePondPluginFileValidateSize,

FilePondPluginImageCrop,

FilePondPluginFileValidateType,

FilePondPluginImageExifOrientation

​

);

​

FilePond.setOptions({

// 设置单个URL是定义服务器配置的最基本形式。

server: '/upload',

// 设置图片类型只能为png才能上传

allowFileTypeValidation: false,

acceptedFileTypes: "image/jpg",

// 启用或禁用图像裁剪

allowImageCrop: true,

​

// 启用或禁用文件大小验证

allowFileSizeValidation: true,

maxFileSize: null,

​

// 启用或禁用提取EXIF信息

allowImageExifOrientation: true

​

});

​

// 使用create方法逐步增强基本文件输入到FilePond元素。

FilePond.create(inputElement)

​

　　上例展示了FilePond常用插件的方法，效果如下图：

　　

　　当然还有

　　我不会在这里做完整的解释。有兴趣的可以自己试试这些方法。

　　三、总结

　　以上就是讲解的全部内容，FilePond是一个非常轻量级的上传插件。没有太多繁琐的配置，这里我没有一一演示每个插件的介绍，只展示常用的部分。注意上面指出的坑，掌握上面讲解的方法，其他插件可以自行学习。

　　FilePond 是一个值得参考和使用的 JavaScript 库。如果你想网站快速添加上传功能，不妨试试。

　　参考

　　[1] 《解释开源项目》：

　　[2]EXIF:

　　[3]FilePond官方文档：

　　[4]FilePond 插件列表：

　　

　　关注公众号，加入交流群，一起讨论有趣的技术话题

　　《开源项目解读系列》——让对开源项目感兴趣的人不再害怕，让开源项目的发起者不再孤单。跟随我们的文章，您会发现编程的乐趣、易用性以及参与开源项目是多么容易。欢迎联系我（微信：xueweihan 备注：解释）加入我们，让更多人爱上开源，为开源做贡献~