講解開源專案:功能強大的 JS 檔案上傳庫
本文作者:HelloGitHub-kalifun
HelloGitHub 的《講解開源專案》系列,專案地址:https://github.com/HelloGitHub-Team/Article
一、介紹
1.1 FilePond
它是一個 JavaScript 檔案上傳庫。可以拖入上傳檔案,並且會對影象進行優化以加快上傳速度。讓使用者體驗到出色、進度可見、如絲般順暢的使用者體驗。
1.2 特點和優勢
- 上傳內容:支援目錄、檔案、多個檔案、本地路徑、遠端 URL 等。
- 檔案管理:刪除檔案、選擇檔案、複製和貼上檔案、或使用 API 方式新增檔案。
- 上傳方式:使用 AJAX 進行非同步上傳、或將檔案編碼為 base64 資料用表單傳送。
- 影象優化:自動調整影象大小、裁剪和修復 EXIF 方向。
- 響應式:可在移動和桌面裝置上使用。
看了效果圖和功能介紹,是不是有些手癢了。接下來就是實戰操作部分,大家可以跟著文章一步步的把這個庫使用起來,點亮你的檔案上傳技能點!
二、實戰操作
下面我們將一步步的講解如何使用 FilePond 這個庫。我們採用的是最簡單的 CDN 引用方式,方便大家能夠快速體檢其魅力(複製程式碼便可檢視效果),接著會深入講解每個外掛的功能,最終編寫了一個組合了幾個外掛的示例及執行效果展示。
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樹的給定部分,並將它們轉換為FilePond元素。 FilePond.parse(document.body); </script> </body> </html>
展示效果:
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 檔案,如果有請在<head><link href="xxx.css" rel="stylesheet"></head>
標籤中引入哦
<head>
<!-- 引入影象預覽外掛的css檔案 -->
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">
</head>
<!-- 引入影象預覽外掛的js檔案 -->
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
<script>
// 註冊外掛 FilePondPluginImagePreview 影象預覽外掛為已上傳的影象呈現縮小的預覽。
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 上傳時可以預覽到上傳的圖片等
// 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)
</script>
</body>
</html>
上面的示例展示了 FilePond 常用外掛的方法,效果展示如下:
當然還有其它方法如:
- destroys:銷燬例項
- find:返回附加提供的元素的例項
- getOptions:返回當前的配置項
- supported:鑑別瀏覽器是否支援 FilePond
這裡就不做完整的講解了,有興趣的可以自行嘗試使用這些方法。
三、總結
以上就是講解的全部內容,FilePond 是一款很輕便的上傳外掛。並沒有太多繁瑣的配置,這裡我並沒有逐一針對每個外掛引入進行演示,只展示了常用的部分。留意上面提示的坑,掌握上面講解的方法,其它的外掛你便可自行學習。
FilePond 是一款很值得參考和使用的 JavaScript 庫,如果想讓自己網站快速加入上傳功能,不妨試試它吧。
四、參考資料
- FilePond 官方文件
- FilePond Plugins List
歡迎關注 HelloGitHub 公眾號,獲取更多開源專案的資料和內容
『講解開源專案系列』啟動——讓對開源專案感興趣的人不再畏懼、讓開源專案的發起者不再孤單。跟著我們的文章,你會發現程式設計的樂趣、使用和發現參與開源專案如此簡單。歡迎聯絡我們給我們投稿,讓更多人愛上開源、貢獻開源