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

時間 2019-11-17

標籤功能強大文件上傳 filepond 欄目 JavaScript 简体版

原文原文鏈接

本文做者：HelloGitHub-kalifunjavascript

這是 HelloGitHub 推出的《講解開源項目》系列，今天給你們推薦一個 JavaScript 開源的文件上傳庫項目——FilePondcss

1、介紹

1.1 FilePond

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

FilePond 項目地址：github.com/pqina/filep…java

1.2 特色和優點

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

看了效果圖和功能介紹，是否是有些手癢了。接下來就是實戰操做部分，你們能夠跟着文章一步步的把這個庫使用起來，點亮你的文件上傳技能點！git

2、實戰操做

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

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>
複製代碼