文件上傳是我們開(kāi)發(fā)網(wǎng)站程序時(shí)經(jīng)常遇到的功能，選擇一個(gè)功能強(qiáng)大，使用簡(jiǎn)單的上傳插件可以節(jié)省我們很多開(kāi)發(fā)時(shí)間，下面就為大家介紹5個(gè)不錯(cuò)的javascript文件上傳插件

這篇文章的資源均來(lái)自https://dcrazed.com/html5-jquery-file-upload-scripts/ 。我選擇了其中自己覺(jué)得可用性比較強(qiáng)的幾個(gè)。

Mini AJAX File Upload Form

這個(gè)插件的UI和體驗(yàn)都非常棒，不過(guò)它依賴于下面介紹的jQuery File Upload plugin。

特點(diǎn)

• 支持多文件上傳

• 支持一次選擇多個(gè)文件上傳

• 可上傳任意文件

• 拖拽支持

• 無(wú)需flash

• 小巧的上傳表單適合移動(dòng)設(shè)備

• 簡(jiǎn)潔的進(jìn)度條

• 可隨時(shí)取消

• 有文檔

• 免費(fèi)

演示  下載

Dropzone JS

一個(gè)輕量級(jí)的文件上傳插件，使用起來(lái)非常簡(jiǎn)單，支持jquery，但并不依賴jquery，文檔齊全，非常推薦。

特點(diǎn)

• 響應(yīng)式設(shè)計(jì)

• 支持多文件上傳

• 支持所有文件格式

• 圖片上傳可預(yù)覽

• 頂級(jí)的UI設(shè)計(jì)

• 取消和刪除文件的選項(xiàng)

• 拖拽支持

• 支持一次選擇多個(gè)文件上傳

• 免費(fèi)

演示  下載

jQuery File Upload Demo

這個(gè)插件就不用多說(shuō)了，可能是最火的文件上傳插件。功能齊全，文件上傳的后端代碼都實(shí)現(xiàn)了。不過(guò)感覺(jué)文檔很亂，默認(rèn)UI也不是很好看，如果讓我選擇我會(huì)選擇上面的Dropzone JS。

特點(diǎn)

• 拖拽支持

• Html進(jìn)度條

• 支持多文件上傳

• 可恢復(fù)文件上傳

• 文件驗(yàn)證以及大小信息

• 取消上傳

• 刪除上傳的文件

• 上傳失敗顯示alert提示。

• 響應(yīng)式設(shè)計(jì)

• 支持Ruby

• 支持php

• 免費(fèi)

演示  下載

Fine Uploader

一個(gè)給你流暢體驗(yàn)的文件上傳插件，功能也比較齊全，感覺(jué)不錯(cuò)的樣子，全瀏覽器支持，純Javascript，不依賴其它項(xiàng)目，免費(fèi)。

演示  下載

HTML5 File Uploads with jQuery

使用新的HTML5 API實(shí)現(xiàn)的拖拽上傳插件，UI設(shè)計(jì)不錯(cuò)，只支持上傳圖片，可預(yù)覽上傳圖片。只支持Chrome 和 Firefox，因此這個(gè)庫(kù)的學(xué)習(xí)意義可能大于實(shí)際用途。

演示  下載

這5款好用的JS上傳插件總體來(lái)說(shuō)還是不錯(cuò)的，當(dāng)然國(guó)內(nèi)也有不少優(yōu)秀的JS上傳插件，以后我們將為大家分享國(guó)內(nèi)優(yōu)秀JS上傳插件