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