移動端使用FormData實現異步上傳打賞

FormData是什么呢?FormData是XMLHttpRequest Level 2添加的一個新的接口,利用FormData對象,我們可以通過JavaScript用一些鍵值對來模擬一系列表單控件,還可以使用XMLHttpRequest的send()方法來異步的提交這個"表單"。比起普通的ajax,使用FormData的最大優點就是我們可以異步上傳一個二進制文件。

所有主流瀏覽器的較新版本都已經支持這個對象了,比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。為什么標題說移動端呢?很明顯,國內很多網站什么的還在兼容IE8甚至IE7,所以,這個方案在PC端并不是那么好用。早在兩年前就有同事不計后果的用上了這個,后來測試發現在IE8下報錯才跑來問我,我看了下同事寫的代碼才發現是個無解的問題,于是同事就開始改造回傳統上傳模式了。

回歸主題,移動端就不同了,目前手機飛速得更新換代,外加上主流手機系統基本都是webkit內核,用上FormData可以說是基本沒什么后苦之憂了。那么糾結該怎么用呢?

先看看FormData的構造函數,如下,可以選擇是否傳入Form對象

new FormData (optional HTMLFormElement form)

FormData的方法,可以傳入DomString或者Blob對象

void append(DOMString name, Blob value, optional DOMString filename);
void append(DOMString name, DOMString value);

具體點,比如

var formData1 = new?FormData(document.getElementById('form'));
var formData2 = new FormData();

formData1.append("name", "樸人博客");
formData1.append("site", "http://www.pswuul.tw");
formData1.append("file", document.getElementById("file"));

簡單的異步發送方式

var xhr = new XMLHttpRequest();

xhr.open("POST" ,"http://www.pswuul.tw" , true);

xhr.send(formData1);

xhr.onload = function(e) {

if (this.status == 200) {

console.log(this.responseText);

}

};

jQuery、Zepto下異步發送方式

$.ajax({

url: "http://www.pswuul.tw",

type: 'POST',

data: formData1,

/**

*必須false才會自動加上正確的Content-Type

*/

contentType:false,

/**

* 必須false才會避開jQuery對 formdata 的默認處理

* XMLHttpRequest會對 formdata 進行正確的處理

*/

processData:false

}).then(function(res){

console.log(res);

});

Caniuse上支持列表如下

can_i_use_form_data

移動端使用FormData實現異步上傳
文章《移動端使用FormData實現異步上傳》二維碼
  • 微信打賞
  • 支付寶打賞

已有8條評論

  1. 星火英語

    來看看啊

    2016-08-25 16:41 回復
  2. 飛利浦呼吸機

    很棒!學習了

    2016-08-17 11:07 回復
  3. 任務易

    謝謝博主分享,贊一個

    2016-06-21 09:23 回復
  4. 律通律師事務所管理軟件

    謝謝分析。很棒

    2016-06-17 10:49 回復
  5. 松松商場

    來看看,支持一下~互訪哦

    2016-06-14 15:22 回復
  6. 伊可可

    高手在民間呀!

    2016-06-14 13:45 回復
  7. 夏日博客

    萬能的 jquery。

    2016-06-11 21:21 回復
  8. 譚話俱樂部

    尊敬技術者!!

    2016-06-04 18:57 回復

(必填)

(必填)

(可選)

黑龙江22选5开奖