資訊專欄INFORMATION COLUMN
摘要：本文作者這是推出的講解開源項目系列，今天給大家推薦一個開源的文件上傳庫項目一介紹它是一個文件上傳庫。可以拖入上傳文件，并且會對圖像進行優化以加快上傳速度。圖片類型圖像裁剪文件大小驗證插件處理阻止太大的文件。
本文作者：HelloGitHub-kalifun
這是 HelloGitHub 推出的《講解開源項目》系列，今天給大家推薦一個 JavaScript 開源的文件上傳庫項目——FilePond
一、介紹 1.1 FilePond它是一個 JavaScript 文件上傳庫。可以拖入上傳文件，并且會對圖像進行優化以加快上傳速度。讓用戶體驗到出色、進度可見、如絲般順暢的用戶體驗。
FilePond 項目地址：https://github.com/pqina/file...1.2 特點和優勢
上傳內容：支持目錄、文件、多個文件、本地路徑、遠程 URL 等。
文件管理：刪除文件、選擇文件、復制和粘貼文件、或使用 API 方式添加文件。
上傳方式：使用 AJAX 進行異步上傳、或將文件編碼為 base64 數據用表單發送。
圖像優化：自動調整圖像大小、裁剪和修復 EXIF 方向。
響應式：可在移動和桌面設備上使用。
看了效果圖和功能介紹，是不是有些手癢了。接下來就是實戰操作部分，大家可以跟著文章一步步的把這個庫使用起來，點亮你的文件上傳技能點！
二、實戰操作下面我們將一步步的講解如何使用 FilePond 這個庫。我們采用的是最簡單的 CDN 引用方式，方便大家能夠快速體檢其魅力（復制代碼便可查看效果），接著會深入講解每個插件的功能，最終編寫了一個組合了幾個插件的示例及運行效果展示。
Tips： 解釋說明均在代碼中以注釋方式展示，請大家注意閱讀。
2.1 快速使用（CDN）示例代碼：
FilePond from CDN
展示效果：
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 文件，如果有請在標簽中引入哦。
我們梳理一下引入插件的步驟：
引入 CSS 文件（部分插件有 CSS 文件）
引入 JS 文件
注冊插件
配置插件（部分插件需配置）
2.3 配合插件使用完整示例代碼：
FilePond from CDN
上面的示例展示了 FilePond 常用插件的方法，效果展示如下：
當然還有其它方法如：
destroys：銷毀實例
find：返回附加提供的元素的實例
getOptions：返回當前的配置項
supported：鑒別瀏覽器是否支持 FilePond
這里就不做完整的講解了，有興趣的可以自行嘗試使用這些方法。
三、總結以上就是講解的全部內容，FilePond 是一款很輕便的上傳插件。并沒有太多繁瑣的配置，這里我并沒有逐一針對每個插件引入進行演示，只展示了常用的部分。留意上面提示的坑，掌握上面講解的方法，其它的插件你便可自行學習。
FilePond 是一款很值得參考和使用的 JavaScript 庫，如果想讓自己網站快速加入上傳功能，不妨試試它吧。
四、參考資料FilePond 官方文檔
FilePond Plugins List
歡迎關注 HelloGitHub 公眾號，獲取更多開源項目的資料和內容
『講解開源項目系列』啟動——讓對開源項目感興趣的人不再畏懼、讓開源項目的發起者不再孤單。跟著我們的文章，你會發現編程的樂趣、使用和發現參與開源項目如此簡單。歡迎聯系我們給我們投稿，讓更多人愛上開源、貢獻開源～
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/106891.html
摘要：開發教程步步為營，掌握基礎技能發布機器學習速成課程為了幫助更多的人了解與學習機器學習相關的知識技能，發布了人工智能學習網站。更多相關內容參考數據科學與機器學習實戰手冊。 showImg(https://segmentfault.com/img/remote/1460000013586587); 前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱...
摘要：靜態資源的訪問通過配置代理實現頁面的訪問，跟服務端工程毫無關系，服務端只負責提供異步接口。集中管理異步接口配置的模塊 Nicon 一言不合，先上平臺Nicon。該平臺接入github登錄，采用七牛CDN存儲，歡迎大家試用。 Nicon 是一個集圖標上傳、展示、使用于一身的字體圖標管理平臺，流程簡單，符合日常開發使用習慣，適合企業在內部部署使用。采用 Iconfont 字體圖標替換項目中...
摘要：靜態資源的訪問通過配置代理實現頁面的訪問，跟服務端工程毫無關系，服務端只負責提供異步接口。集中管理異步接口配置的模塊 Nicon 一言不合，先上平臺Nicon。該平臺接入github登錄，采用七牛CDN存儲，歡迎大家試用。 Nicon 是一個集圖標上傳、展示、使用于一身的字體圖標管理平臺，流程簡單，符合日常開發使用習慣，適合企業在內部部署使用。采用 Iconfont 字體圖標替換項目中...
摘要：前言一個集微信公眾號商城小程序商城商城后臺的一個開源項目，后臺是基于開發的，是一個簡潔而強大的開源微信公眾平臺開發框架，微信功能插件化開發多公眾號管理配置簡單。微信小程序項目下載整個包之后，進行根目錄文件夾。 前言 一個集微信公眾號商城/小程序商城/商城后臺的一個開源項目，后臺是基于WeiPHP5.0開發的，WeiPHP是一個簡潔而強大的開源微信公眾平臺開發框架，微信功能插件化開發,多...
摘要：前言一個集微信公眾號商城小程序商城商城后臺的一個開源項目，后臺是基于開發的，是一個簡潔而強大的開源微信公眾平臺開發框架，微信功能插件化開發多公眾號管理配置簡單。微信小程序項目下載整個包之后，進行根目錄文件夾。 前言 一個集微信公眾號商城/小程序商城/商城后臺的一個開源項目，后臺是基于WeiPHP5.0開發的，WeiPHP是一個簡潔而強大的開源微信公眾平臺開發框架，微信功能插件化開發,多...
閱讀 3291·2021-11-25 09:43
閱讀 2093·2021-09-22 10:02
閱讀 3348·2021-09-06 15:00
閱讀 2305·2019-08-30 15:56
閱讀 2356·2019-08-30 15:54
閱讀 3233·2019-08-30 14:14
閱讀 2268·2019-08-29 17:25
閱讀 2909·2019-08-29 17:16
