?2016-2026 Matools All rights reserved,
粵ICP備17059708號
本文作者：HelloGitHub-kalifun
HelloGitHub 的《講解開源項目》系列，項目地址：https://github.com/HelloGitHub-Team/Article
<https://github.com/HelloGitHub-Team/Article>
一、介紹
1.1 FilePond <https://github.com/pqina/filepond>
它是一個 JavaScript 文件上傳庫。可以拖入上傳文件，并且會對圖像進行優(yōu)化以加快上傳速度。讓用戶體驗到出色、進度可見、如絲般順暢的用戶體驗。
1.2 特點和優(yōu)勢
* 上傳內(nèi)容：支持目錄、文件、多個文件、本地路徑、遠程 URL 等。
* 文件管理：刪除文件、選擇文件、復(fù)制和粘貼文件、或使用 API 方式添加文件。
* 上傳方式：使用 AJAX 進行異步上傳、或?qū)⑽募幋a為 base64 數(shù)據(jù)用表單發(fā)送。
* 圖像優(yōu)化：自動調(diào)整圖像大小、裁剪和修復(fù) EXIF 方向。
* 響應(yīng)式：可在移動和桌面設(shè)備上使用。
看了效果圖和功能介紹，是不是有些手癢了。接下來就是實戰(zhàn)操作部分，大家可以跟著文章一步步的把這個庫使用起來，點亮你的文件上傳技能點！
二、實戰(zhàn)操作
下面我們將一步步的講解如何使用 FilePond 這個庫。我們采用的是最簡單的 CDN
引用方式，方便大家能夠快速體檢其魅力（復(fù)制代碼便可查看效果），接著會深入講解每個插件的功能，最終編寫了一個組合了幾個插件的示例及運行效果展示。
Tips： 解釋說明均在代碼中以注釋方式展示，請大家注意閱讀。
2.1 快速使用（CDN）
示例代碼：
<!DOCTYPE html> <html> <head> <!-- html 標題 --> <title>FilePond from
CDN</title> <!-- 引入Filepond的css --> <link
href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet"> </head>
<body> <!-- input標簽作為文件上傳入口 --> <input type="file" class="filepond"> <!--
引入FilePond的js --> <script
src="https://unpkg.com/filepond/dist/filepond.js"></script> <script> //
FilePond.parse 使用類.filepond解析DOM樹的給定部分，并將它們轉(zhuǎn)換為FilePond元素。
FilePond.parse(document.body); </script> </body> </html>
展示效果：
2.2 引入插件
似乎單純的上傳功能是否無法滿足我們的需求，F(xiàn)ilePond
該庫擁有多樣、強大的插件部分，可以根據(jù)自己的需求選擇插件組合起來使用哦。下面先簡單的了解一下每個插件的功能：
* File Rename：重命名客戶端上的文件
* File Encode：將文件編碼為 base64 數(shù)據(jù)
* File size Validation：文件大小驗證工具
* File Type Validation：文件類型驗證工具
* File Metadata：限制要添加的文件類型
* File Poster：在文件項目中顯示圖像
* Image Preview：顯示圖像文件的預(yù)覽
* Image Edit：手動編輯圖像文件
* Image Crop：設(shè)置圖像文件的裁剪比例
* Image Resize：設(shè)置圖像文件的輸出尺寸
* Image Transform：上傳之前在客戶端上圖像變換
* Image EXIF Orientation：提取 EXIF
<https://baike.baidu.com/item/Exif/422825?fr=aladdin> 方向信息
* Image Size Validation：限制要添加的圖像的尺寸
* Image Filter：將顏色矩陣應(yīng)用于圖像像素
下面我來介紹如何引入插件吧！
坑！： 使用插件前，一定要查閱清楚該插件是否有 CSS 文件，如果有請在<head><link href="xxx.css"
rel="stylesheet"></head>標簽中引入哦
<head> <!-- 引入圖像預(yù)覽插件的css文件 --> <link
href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css"
rel="stylesheet"> </head> <!-- 引入圖像預(yù)覽插件的js文件 --> <script
src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
<script> // 注冊插件 FilePondPluginImagePreview 圖像預(yù)覽插件為已上傳的圖像呈現(xiàn)縮小的預(yù)覽。
FilePond.registerPlugin(FilePondPluginImagePreview); </script>
我們梳理一下引入插件的步驟：
* 引入 CSS 文件（部分插件有 CSS 文件）
* 引入 JS 文件
* 注冊插件
* 配置插件（部分插件需配置）
2.3 配合插件使用
完整示例代碼：
<!DOCTYPE html> <html> <head> <title>FilePond from CDN</title> <!-- Filepond
CSS --> <link href="https://unpkg.com/filepond/dist/filepond.css"
rel="stylesheet"> <!-- FilePondPluginImagePreview 插件 CSS--> <link
href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css"
rel="stylesheet"> <!-- FilePondPluginImageEdit 插件 CSS--> <link
href="https://unpkg.com/filepond-plugin-image-edit/dist/filepond-plugin-image-edit.css"
rel="stylesheet"> </head> <body> <!-- 我們將把這個輸入框變成上傳文件框 --> <input type="file"
class="filepond"> <!-- FilePondPluginImagePreview 插件js--> <script
src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
<!--FilePondPluginImageEdit 插件js--> <script
src="https://unpkg.com/filepond-plugin-image-edit/dist/filepond-plugin-image-edit.js"></script>
<!--FilePondPluginFileValidateSize 插件js--> <script
src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.js"></script>
<!--FilePondPluginFileValidateType 插件js--> <script
src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js"></script>
<!--FilePondPluginImageCrop 插件js--> <script
src="https://unpkg.com/filepond-plugin-image-crop/dist/filepond-plugin-image-crop.js"></script>
<!--FilePondPluginImageExifOrientation 插件js--> <script
src="https://unpkg.com/filepond-plugin-image-exif-orientation/dist/filepond-plugin-image-exif-orientation.js"></script>
<!--引入Filepond的js--> <script
src="https://unpkg.com/filepond/dist/filepond.js"></script> <script> //
querySelector() 方法返回文檔中匹配指定 CSS 選擇器的一個元素。 var inputElement =
document.querySelector('input[type="file"]'); // 注冊插件 //
FilePondPluginImagePreview 上傳時可以預(yù)覽到上傳的圖片等 // FilePondPluginImageEdit
由于doka收費，所以編輯功能就不演示了。 // FilePondPluginFileValidateType 圖片類型 //
FilePondPluginImageCrop 圖像裁剪 // FilePondPluginFileValidateSize
文件大小驗證插件處理阻止太大的文件。 FilePond.registerPlugin( FilePondPluginImagePreview,
FilePondPluginImageEdit, FilePondPluginFileValidateSize,
FilePondPluginImageCrop, FilePondPluginFileValidateType,
FilePondPluginImageExifOrientation ); FilePond.setOptions({ //
設(shè)置單個URL是定義服務(wù)器配置的最基本形式。 server: '/upload', // 設(shè)置圖片類型只能為png才能上傳
allowFileTypeValidation: false, acceptedFileTypes: "image/jpg", // 啟用或禁用圖像裁剪
allowImageCrop: true, // 啟用或禁用文件大小驗證 allowFileSizeValidation: true,
maxFileSize: null, // 啟用或禁用提取EXIF信息 allowImageExifOrientation: true }); //
使用create方法逐步增強基本文件輸入到FilePond元素。 FilePond.create(inputElement) </script>
</body> </html>
上面的示例展示了 FilePond 常用插件的方法，效果展示如下：
當(dāng)然還有其它方法如：
* destroys：銷毀實例
* find：返回附加提供的元素的實例
* getOptions：返回當(dāng)前的配置項
* supported：鑒別瀏覽器是否支持 FilePond
這里就不做完整的講解了，有興趣的可以自行嘗試使用這些方法。
三、總結(jié)
以上就是講解的全部內(nèi)容，F(xiàn)ilePond
是一款很輕便的上傳插件。并沒有太多繁瑣的配置，這里我并沒有逐一針對每個插件引入進行演示，只展示了常用的部分。留意上面提示的坑，掌握上面講解的方法，其它的插件你便可自行學(xué)習(xí)。
FilePond 是一款很值得參考和使用的 JavaScript 庫，如果想讓自己網(wǎng)站快速加入上傳功能，不妨試試它吧。
四、參考資料
* FilePond 官方文檔 <https://pqina.nl/filepond/docs/>
* FilePond Plugins List <https://pqina.nl/filepond/plugins.html>
歡迎關(guān)注 HelloGitHub 公眾號，獲取更多開源項目的資料和內(nèi)容
『講解開源項目系列』啟動——讓對開源項目感興趣的人不再畏懼、讓開源項目的發(fā)起者不再孤單。跟著我們的文章，你會發(fā)現(xiàn)編程的樂趣、使用和發(fā)現(xiàn)參與開源項目如此簡單。歡迎聯(lián)系我們給我們投稿，讓更多人愛上開源、貢獻開源～
熱門工具 換一換