[[396934]]

【51CTO.com快譯】有過(guò)軟件開(kāi)發(fā)經(jīng)驗(yàn)的小伙伴都知道，從客戶(hù)端和服務(wù)器端管理文件的上傳，往往是一件非常繁瑣復(fù)雜的工作。在此，我精心挑選了五款能夠方便您輕松開(kāi)展日常工作的實(shí)用JavaScript上傳庫(kù)。通過(guò)了解它們的功能、優(yōu)勢(shì)、價(jià)格方案，您可以根據(jù)自己的實(shí)際需求與項(xiàng)目進(jìn)行選用。

1.Uppy

Uppy能夠?qū)崿F(xiàn)從本地磁盤(pán)、遠(yuǎn)程URL、以及云端平臺(tái)(如instagram、Dropbox、Google Drive)獲取各種文件，然后將它們上傳到最終的目標(biāo)位置。由于遵從了tus標(biāo)準(zhǔn)(一種基于HTTP的、可恢復(fù)上傳的開(kāi)放式協(xié)議，詳見(jiàn)--https://tus.io/)，因此由它執(zhí)行的各種大型上傳，都可以免受不良網(wǎng)絡(luò)條件的影響。

其儀表盤(pán)(Dashboard)插件可以實(shí)現(xiàn)簡(jiǎn)單的拖放操作，顯示文件的預(yù)覽，允許用戶(hù)編輯元數(shù)據(jù)，以及監(jiān)控上傳的進(jìn)度。它實(shí)際上充當(dāng)了其他Uppy插件的宿主機(jī)(host)的角色。例如，當(dāng)需要添加instagram或網(wǎng)絡(luò)攝像頭模塊時(shí)，它們會(huì)在儀表板上顯示出對(duì)應(yīng)的選項(xiàng)卡，以方便用戶(hù)直接通過(guò)點(diǎn)選，來(lái)實(shí)現(xiàn)文件的上傳。

其XHR Upload插件能夠?qū)⑽募?，從本地磁盤(pán)或網(wǎng)絡(luò)攝像頭，添加到現(xiàn)有的Apache、Nginx、Node.js、Ruby或PHP服務(wù)器上。不過(guò)，您必須運(yùn)行Uppy開(kāi)源的云服務(wù)器，才能實(shí)現(xiàn)遠(yuǎn)程上傳。就算瀏覽器或?qū)Ш匠霈F(xiàn)了意外崩潰，Uppy也能夠通過(guò)Golden Retriever插件，將選定的文件保存在瀏覽器的緩存中，以按需還原的方式，實(shí)現(xiàn)繼續(xù)上傳。

能夠支持多種語(yǔ)言的Uppy widget(小部件)不但完全開(kāi)源，而且是由社區(qū)驅(qū)動(dòng)的。由于Uppy是免費(fèi)的，因此您不必為文件上傳的需求單獨(dú)支付費(fèi)用。通過(guò)詳盡的文檔鏈接--https://uppy.io/docs/，您可以查閱到清晰的安裝指南、插件列表、以及各種可用功能。而通過(guò)其演示頁(yè)面，您可以深入了解Uppy儀表板、拖放操作、以及其他各種插件功能。

2.DHTMLX Vault

DHTMLX Vault提供了一種簡(jiǎn)單的方法，來(lái)構(gòu)建支持Angular、React和Vue.js的JavaScript文件上傳庫(kù)。該工具帶有基于Google Material Design的清晰用戶(hù)界面，提供了鼠標(biāo)的拖放功能，以及一整套完善的文件管理控件。

由于能夠接受JSON格式的數(shù)據(jù)，因此您可以通過(guò)Vault，從本地源和外部URL來(lái)加載文件。而如果鏈接的屬性中帶有指向文件服務(wù)器上的位置路徑，那么您也可以從Vault處下載文件。同時(shí)，Vault還能夠從服務(wù)器上，還原以前上傳過(guò)的數(shù)據(jù)列表。

默認(rèn)情況下，只要最終用戶(hù)將文件添加到Vault之中，即可實(shí)現(xiàn)自動(dòng)上傳。當(dāng)然，您也可以配置為手動(dòng)加載的方式，讓用戶(hù)自行單擊“上傳”按鈕。其進(jìn)度條能夠顯示當(dāng)前上傳操作的完成百分比。同時(shí)，您還可以添加額外的放置區(qū)域，以便用戶(hù)將文件拖曳到Vault與應(yīng)用程序的其他部分。通過(guò)單擊“取消”按鈕，您可以隨時(shí)撤消上傳進(jìn)程。

此外，該上傳工具還能夠借助REST API的方式，便捷地管理各類(lèi)文件。例如，您可以通過(guò)限制每個(gè)已加載文件的最大體積、上傳文件的數(shù)量、以及可接受的文件擴(kuò)展名，來(lái)對(duì)整個(gè)上傳過(guò)程予以控制。當(dāng)然，由Vault下載的文件也可以按照最終用戶(hù)的選擇條件，進(jìn)行各種過(guò)濾和排序。

Vault組件具有兩種默認(rèn)的視圖模式--列表和網(wǎng)格。其中，網(wǎng)格視圖更為實(shí)用，您可以通過(guò)它看到文件的預(yù)覽，并對(duì)其質(zhì)量進(jìn)行管控。用戶(hù)既可以在列表模式和網(wǎng)格模式之間輕松地進(jìn)行切換，又可以同時(shí)操縱多個(gè)文件，并通過(guò)拖放的方式，對(duì)其進(jìn)行重新排序。

Vault上傳庫(kù)的優(yōu)勢(shì)在于它擁有豐富的自定義功能。所有元素，包括圖標(biāo)、進(jìn)度條、以及工具欄控件，都可以被輕松地修改。您不但可以通過(guò)為Vault中的所有文本標(biāo)簽提供翻譯的方式，以應(yīng)對(duì)非英語(yǔ)的語(yǔ)言環(huán)境;當(dāng)然也可以通過(guò)TypeScript的支持，讓自己的代碼更整潔、更助于加快開(kāi)發(fā)的進(jìn)程。

文檔鏈接--https://docs.dhtmlx.com/vault/index.html?_ga=2.99425181.2074628262.1568012484-262505264.1568012484，提供了詳細(xì)的功能指南、API參考、以及針對(duì)Angular、React和Vue.js的集成指南。您可以根據(jù)其循序漸進(jìn)的教程，來(lái)為客戶(hù)端創(chuàng)建文件上傳功能。其演示頁(yè)面，能夠以程序示例的形式，展示DHTMLX庫(kù)的各種主要功能。

您可以先下載其30天的試用版，然后按需升級(jí)到最合適的產(chǎn)品選項(xiàng)中。

3.Syncfusion

Syncfusion上傳組件允許用戶(hù)加載各種圖像、文檔、以及服務(wù)器端的其他文件。該上傳庫(kù)具有與上述工具類(lèi)似的功能集，其中包括多個(gè)文件的選擇、自動(dòng)化上傳、以及拖放等功能。此外，它還支持通過(guò)分塊(chunking)功能，提供暫停、恢復(fù)和重試等選項(xiàng)。雖然僅能在異步上傳中起作用，但是塊功能可以將選定的文件劃分為多個(gè)小的數(shù)據(jù)塊，以便AJAX將其傳輸?shù)椒?wù)器上。

您可以將該上傳工具與Angular、React、Vue和Blazor等框架相集成。憑借著其模板和按鈕屬性，您可以全面自定義默認(rèn)組件的外觀。同時(shí)，Syncfusion還允許您切換各類(lèi)按鈕的語(yǔ)言、文件的狀態(tài)、圖標(biāo)的標(biāo)題、工具的提示、以及拖動(dòng)區(qū)域的文本內(nèi)容。此外，它可以為使用RTL語(yǔ)言的用戶(hù)，設(shè)置從右到左的渲染效果。

其配套的文檔分為入門(mén)指南、代碼示例、可用功能列表、以及API參考等11個(gè)部分。其演示頁(yè)面提供了如何利用各種默認(rèn)功能，上傳文件的示例，您可以進(jìn)行文件瀏覽，將文件以拖放的方式、自動(dòng)的方式、以及順序的方式，上傳到服務(wù)器端。

4.Dropzone

作為一個(gè)輕量級(jí)的JavaScript庫(kù)，Dropzone支持多個(gè)文件的同步、上傳、拖放、以及圖像縮略圖的預(yù)覽。它主要通過(guò)AJAX來(lái)將文件上傳到服務(wù)器端。用戶(hù)可以簡(jiǎn)單地替換HTML預(yù)覽模板，改編自定義的CSS，以及按需創(chuàng)建各種事件偵聽(tīng)器，以觸發(fā)Dropzone外觀的變化。Dropzone上傳工具能夠與多種瀏覽器相兼容，其中包括：Chrome 7+、IE 10+、Firefox 4+、Opera 12+和Safari 6+。

作為一款免費(fèi)的工具，Dropzone主要依靠各個(gè)軟件開(kāi)發(fā)公司的捐贈(zèng)，來(lái)獲取財(cái)務(wù)支持。每個(gè)用戶(hù)都可以根據(jù)MIT許可證，來(lái)分發(fā)使用。但是由于無(wú)法自行配置服務(wù)器，因此用戶(hù)只能向指定空間上傳文件。而在空間不夠時(shí)，用戶(hù)需要調(diào)整瀏覽器端圖像的大小。

其配套的文檔頁(yè)面介紹了安裝和配置的過(guò)程、分享的提示、以及主機(jī)的事件列表。其演示頁(yè)面則提供了有關(guān)懸浮窗體的基本示例。

5.FineUploader

作為一個(gè)純JavaScript庫(kù)，F(xiàn)ineUploader支持幾乎所有主流的瀏覽器，并且可以配合任何一種服務(wù)器端技術(shù)來(lái)使用。當(dāng)然，它也可以作為jQuery插件被使用。該工具帶有進(jìn)度條、支持拖放、多個(gè)文件選擇、數(shù)據(jù)分塊、圖像文件預(yù)覽、以及圖片縮放等效果。您可以根據(jù)用戶(hù)的類(lèi)型，限制他們上傳的文件數(shù)量。由于其樣式和自定義的過(guò)程都能夠獨(dú)立于JavaScript，因此您只需編輯HTML和CSS，即可修改其布局。

FineUploader擁有免費(fèi)的、由社區(qū)驅(qū)動(dòng)(community-driven)的MIT許可證。其配套文檔頁(yè)面包含了啟動(dòng)教程、詳盡的功能描述、以及各種API的參考。同時(shí)，它也提供了有關(guān)如何升級(jí)到其5.x版本的信息。其演示頁(yè)面則向用戶(hù)展示了如何將默認(rèn)的簡(jiǎn)單縮略圖模板，與FineUploader的UI相結(jié)合。不過(guò)用戶(hù)僅能將它們導(dǎo)出為jpeg、jpg、gif和png等擴(kuò)展名格式。

小結(jié)

上述列舉的五個(gè)被廣泛使用的JavaScript上傳庫(kù)，各自能夠支持各種不同的文件擴(kuò)展名，提供便捷的拖放功能，手動(dòng)與自動(dòng)化的上傳方式，多個(gè)文件選擇，以及進(jìn)度條等功能。其中有些工具還可以提供分塊上傳，允許圖像文件的預(yù)覽，以及支持某些特定的框架和瀏覽器。它們中有的可用于開(kāi)源的軟件開(kāi)發(fā)，而有的則需要通過(guò)付款才能用于商業(yè)項(xiàng)目。其實(shí)，市場(chǎng)上還有許多此類(lèi)型的軟件庫(kù)與工具。不過(guò)，目前尚無(wú)一種能夠適合所有的應(yīng)用場(chǎng)景。因此，您可以通過(guò)試用，來(lái)選擇最合適本團(tuán)隊(duì)和項(xiàng)目的一款工具。

原文標(biāo)題：Five Handy JavaScript Uploaders to Keep in Mind，作者：Ivan Petrenko

【51CTO譯稿，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明原文譯者和出處為51CTO.com】