作者: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>
我們梳理一下引入插件的步驟: 引入 CSS 文件(部分插件有 CSS 文件)引入 JS 文件註冊插件配置插件(部分插件需配置)
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]
[3]FilePond 官方文檔: https://pqina.nl/filepond/docs/
[4]FilePond Plugins List: https://pqina.nl/filepond/plugins.html
關注公眾加入交流群,一起討論有趣的技術話題