簡述三種非同步上傳檔案方式

很久沒寫過部落格了！

上次寫已經是去年的12月了，離現在也有足足三個月了。這幾個月因為要搭建個人**以及準備個人簡歷，包括最近要準備最近的各大公司的實習春招，很難抽時間來寫部落格，這次的非同步檔案上傳我覺得是很有必要了解的，籠絡了很多知識點，因此準備寫一篇部落格來鞏固下。

非同步上傳檔案是為了更好的使用者體驗，是每個前端必須掌握的技能。這裡我提出三點有關非同步檔案上傳的方式。

使用第三方控制項，如flash,activex等瀏覽器外掛程式上傳。

使用隱藏的iframe模擬非同步上傳。

使用xmlhttprequest2來實現非同步上傳。

第二種使用隱藏的iframe模擬非同步上傳。為什麼在這裡說的是模擬呢?因為我們其實是將返回結果放在了乙個隱藏的iframe中，所以才沒有使當前頁面跳轉，感覺就像是非同步操作一樣。

先貼出**:

1238

91015

1640

view code

這種技術有兩個關鍵的地方:

1.form會指定target,提交的結果定向返回到隱藏的ifram中。(即form的target與iframe的name屬性一致)。

2.提交完成後，iframe中頁面與主頁面通訊，通知上傳結果及服務端檔案資訊

如何與主頁面通訊呢?

我們用nodejs在接收完了檔案後返回了乙個window.parent.主頁面定義的方法，執行後可以得知檔案上傳完成。**很簡單:

1 router.post('/upload2', multipartmiddleware, function
(req, res) , 3000);
1011 });

view code

執行後可以開啟開發人員選項，你會發現隱藏iframe中返回了伺服器的一些資料。

第三種使用xmlhttprequest2來進行真正的非同步上傳。

還是先貼出**:

1238

910附件：

1112

13正在上傳...

1415

停止上傳

1617

1819

2021112

113

view code

**有點多，但是通俗易懂。使用過ajax的人都知道，xhr物件提供了乙個onreadystatechange的**方法來監聽整個請求/響應過程。在xmlhttprequest2級規範中又多了幾個進度事件。有以下6個事件:

1.loadstart: 在接收到響應資料的第乙個位元組時觸發。

2.progress: 在接收響應期間持續不斷地觸發。

3.error: 在請求發生錯誤時觸發。

4.abort: 在因為呼叫abort()方法而終止連線時觸發。

5.load: 在接收到完整的響應資料時觸發。

6.loadend: 在通訊完成或者觸發error,abort,load事件後觸發。

這次我們可以解讀**:

當傳輸事件開始後，我們便在停止傳送按鈕上新增點選事件，內建了abort方法可以停止傳送。若不點則會正常上傳直到傳送完畢為止。其

後台**類似第二種方法。

三種方法各有優劣，做個簡單的小結吧。

第三方控制項互動性和可控性好，因為接近底層，其效能也是很優秀的。但是由於編寫難度大通常需要自己安裝外掛程式，有時可能需要自己進行編寫。

隱藏的iframe方法我個人覺得是非常有思想的乙個方法，iframe可以幫我們做很多事。這種方式具有廣泛的瀏覽器相容性而且不需要安裝外掛程式。但是它互動性差，上傳過程不可控，而且效能也是很一般的。

xhr2級的純ajax上傳，它必須要版本比較高一點的瀏覽器(ie9+)。但是它互動性特別好，可以看到上傳進度並且是可控的。

開發可按需求來採用不同方法。個人覺得這些檔案上傳，特別是第二種提供的是一種思想，充分的利用了某些html標籤的特性，可能是我們開發人員需要多思考的地方。

簡述三種非同步上傳檔案方式

springmvc上傳檔案的三種方式

Django檔案的三種上傳方式學習

JS非同步載入的三種方式

簡述三種非同步上傳檔案方式

springmvc上傳檔案的三種方式

Django檔案的三種上傳方式學習

JS非同步載入的三種方式

相關推薦