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