[[396934]]

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

1.Uppy

Uppy能夠實現從本地磁盤、遠程URL、以及云端平臺(如instagram、Dropbox、Google Drive)獲取各種文件，然后將它們上傳到最終的目標位置。由于遵從了tus標準(一種基于HTTP的、可恢復上傳的開放式協議，詳見--https://tus.io/)，因此由它執行的各種大型上傳，都可以免受不良網絡條件的影響。

其儀表盤(Dashboard)插件可以實現簡單的拖放操作，顯示文件的預覽，允許用戶編輯元數據，以及監控上傳的進度。它實際上充當了其他Uppy插件的宿主機(host)的角色。例如，當需要添加instagram或網絡攝像頭模塊時，它們會在儀表板上顯示出對應的選項卡，以方便用戶直接通過點選，來實現文件的上傳。

其XHR Upload插件能夠將文件，從本地磁盤或網絡攝像頭，添加到現有的Apache、Nginx、Node.js、Ruby或PHP服務器上。不過，您必須運行Uppy開源的云服務器，才能實現遠程上傳。就算瀏覽器或導航出現了意外崩潰，Uppy也能夠通過Golden Retriever插件，將選定的文件保存在瀏覽器的緩存中，以按需還原的方式，實現繼續上傳。

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

2.DHTMLX Vault

DHTMLX Vault提供了一種簡單的方法，來構建支持Angular、React和Vue.js的JavaScript文件上傳庫。該工具帶有基于Google Material Design的清晰用戶界面，提供了鼠標的拖放功能，以及一整套完善的文件管理控件。

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

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

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

Vault組件具有兩種默認的視圖模式--列表和網格。其中，網格視圖更為實用，您可以通過它看到文件的預覽，并對其質量進行管控。用戶既可以在列表模式和網格模式之間輕松地進行切換，又可以同時操縱多個文件，并通過拖放的方式，對其進行重新排序。

Vault上傳庫的優勢在于它擁有豐富的自定義功能。所有元素，包括圖標、進度條、以及工具欄控件，都可以被輕松地修改。您不但可以通過為Vault中的所有文本標簽提供翻譯的方式，以應對非英語的語言環境;當然也可以通過TypeScript的支持，讓自己的代碼更整潔、更助于加快開發的進程。

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

您可以先下載其30天的試用版，然后按需升級到最合適的產品選項中。

3.Syncfusion

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

您可以將該上傳工具與Angular、React、Vue和Blazor等框架相集成。憑借著其模板和按鈕屬性，您可以全面自定義默認組件的外觀。同時，Syncfusion還允許您切換各類按鈕的語言、文件的狀態、圖標的標題、工具的提示、以及拖動區域的文本內容。此外，它可以為使用RTL語言的用戶，設置從右到左的渲染效果。

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

4.Dropzone

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

作為一款免費的工具，Dropzone主要依靠各個軟件開發公司的捐贈，來獲取財務支持。每個用戶都可以根據MIT許可證，來分發使用。但是由于無法自行配置服務器，因此用戶只能向指定空間上傳文件。而在空間不夠時，用戶需要調整瀏覽器端圖像的大小。

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

5.FineUploader

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

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

小結

上述列舉的五個被廣泛使用的JavaScript上傳庫，各自能夠支持各種不同的文件擴展名，提供便捷的拖放功能，手動與自動化的上傳方式，多個文件選擇，以及進度條等功能。其中有些工具還可以提供分塊上傳，允許圖像文件的預覽，以及支持某些特定的框架和瀏覽器。它們中有的可用于開源的軟件開發，而有的則需要通過付款才能用于商業項目。其實，市場上還有許多此類型的軟件庫與工具。不過，目前尚無一種能夠適合所有的應用場景。因此，您可以通過試用，來選擇最合適本團隊和項目的一款工具。

原文標題：Five Handy JavaScript Uploaders to Keep in Mind，作者：Ivan Petrenko

【51CTO譯稿，合作站點轉載請注明原文譯者和出處為51CTO.com】