功能強大的 JS 文件上傳庫：FilePond

作者：HelloGitHub-kalifun

這是 HelloGitHub 推出的《講解開源項目》^[1]系列，今天給大家推薦一個

JavaScript 開源的文件上傳庫項目——FilePond

一、介紹

1.1 FilePond

它是一個 JavaScript 文件上傳庫。可以拖入上傳文件，並且會對圖像進行優化以加快上傳速度。讓用戶體驗到出色、進度可見、如絲般順暢的文件上傳體驗。

FilePond 項目地址：https://github.com/pqina/filepond

1.2 特點和優勢

• 上傳內容：支持目錄、文件、多個文件、本地路徑、遠程 URL 等。
• 文件管理：刪除文件、選擇文件、複製和粘貼文件、或使用 API 方式添加文件。
• 上傳方式：使用 AJAX 進行異步上傳、或將文件編碼為 base64 數據用表單發送。
• 圖像優化：自動調整圖像大小、裁剪和修復 EXIF 方向。
• 響應式：可在移動和桌面設備上使用。

看了效果圖和功能介紹，是不是有些手癢了。接下來就是實戰操作部分，大家可以跟著文章一步步的把這個庫使用起來，點亮你的文件上傳技能點！

實戰操作

下面我們將一步步的講解如何使用 FilePond 這個庫。我們採用的是最簡單的 CDN 引用方式，方便大家能夠快速體檢其魅力（複製代碼便可查看效果），接著會深入講解每個插件的功能，最終編寫了一個組合了幾個插件的示例及運行效果展示。

Tips： 解釋說明均在代碼中以註釋方式展示，請大家注意閱讀。

2.1快速使用（CDN）

示例代碼：

 
 <title>FilePond from CDN/<title>
​
 
 <link>
​


​
 


​


​
​

​


​

展示效果：

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^[2] 方向信息
• Image Size Validation：限制要添加的圖像的尺寸
• Image Filter：將顏色矩陣應用於圖像像素

下面我來介紹如何引入插件吧！

坑！： 使用插件前，一定要查閱清楚該插件是否有 CSS 文件，如果有請在

<link>標籤中引入哦。

 
 <link>



​

1. 我們梳理一下引入插件的步驟： 引入 CSS 文件（部分插件有 CSS 文件）
2. 引入 JS 文件
3. 註冊插件
4. 配置插件（部分插件需配置）

2.3 配合插件使用

完整示例代碼：

 <title>FilePond from CDN/<title>
​
 
 <link>
 
 <link>
 
 <link>

​

​


​




 










​

​

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

當然還

• 其它方法如： destroys：銷燬實例
• find：返回附加提供的元素的實例
• getOptions：返回當前的配置項
• supported：鑑別瀏覽器是否支持 FilePond

這裡就不做完整的講解了，有興趣的可以自行嘗試使用這些方法。

三、總結

以上就是講解的全部內容，FilePond 是一款很輕便的上傳插件。並沒有太多繁瑣的配置，這裡我並沒有逐一針對每個插件引入進行演示，只展示了常用的部分。留意上面提示的坑，掌握上面講解的方法，其它的插件你便可自行學習。

FilePond 是一款很值得參考和使用的 JavaScript 庫，如果想讓自己網站快速加入上傳功能，不妨試試它吧。

References

[1] 《講解開源項目》: https://github.com/HelloGitHub-Team/Article

[2]EXIF: https://baike.baidu.com/item/Exif/422825?fr=aladdin

[3]FilePond 官方文檔: https://pqina.nl/filepond/docs/

[4]FilePond Plugins List: https://pqina.nl/filepond/plugins.html

『講解開源項目系列』——讓對開源項目感興趣的人不再畏懼、讓開源項目的發起者不再孤單。跟著我們的文章，你會發現編程的樂趣、使用和發現參與開源項目如此簡單。歡迎聯繫我（微信：xueweihan 備註：講解）加入我們，讓更多人愛上開源、貢獻開源～