功能強大的 JS 檔案上傳庫：FilePond

阿新 • • 發佈：2020-12-08

一、介紹

1.1 FilePond

它是一個JavaScript檔案上傳庫。可以拖入上傳檔案，並且會對影象進行優化以加快上傳速度。讓使用者體驗到出色、進度可見、如絲般順暢的使用者體驗。

FilePond 專案地址：https://github.com/pqina/

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>

資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com

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>