什么是FormData？

FormData對(duì)象可以組裝一組用 XMLHttpRequest發(fā)送請(qǐng)求的鍵/值對(duì)。它可以更靈活方便的發(fā)送表單數(shù)據(jù)，因?yàn)榭梢元?dú)立于表單使用。如果你把表單的編碼類型設(shè)置為multipart/form-data ，則通過FormData傳輸?shù)臄?shù)據(jù)格式和表單通過submit() 方法傳輸?shù)臄?shù)據(jù)格式相同；

如何創(chuàng)建一個(gè)FormData對(duì)象

你可以自己創(chuàng)建一個(gè)FormData對(duì)象，然后通過調(diào)用它的append()方法添加字段，就像這樣：

//實(shí)例化一個(gè)formData對(duì)象var formData = new FormData();formData.append("username", "Groucho");formData.append("userid", 123456); // 數(shù)字 123456 會(huì)被立即轉(zhuǎn)換成字符串 "123456"http:// HTML上的 文件類型input[type=file]的文件框，由用戶選擇formData.append("userfile", fileInputElement.files[0]);// JavaScript file-like 對(duì)象var content = '<a id="a"><b id="b">hey!</b></a>'; // 新文件的正文...var blob = new Blob([content], { type: "text/xml"});formData.append("webmasterfile", blob);

注意：字段 “userfile” 和 “webmasterfile” 都包含一個(gè)文件. 字段 “userid” 是數(shù)字類型，它將被FormData.append()方法轉(zhuǎn)換成字符串類型(FormData 對(duì)象的字段類型可以是 Blob, File, 或者 string: 如果它的字段類型不是Blob也不是File，則會(huì)被轉(zhuǎn)換成字符串類型。

使用jQuery的Ajax方法發(fā)送FormData數(shù)據(jù)

//記錄當(dāng)前時(shí)間var time=new Date().getTime();//記錄當(dāng)前進(jìn)度var percentage =null;//記錄當(dāng)前上傳速度var velocity=null;//記錄已上傳文件字節(jié)大小var loaded=0;$.ajax({ url: 'Url', type: "POST", data: formData, contentType: false, // 必須 不設(shè)置內(nèi)容類型 processData: false, // 必須 不處理數(shù)據(jù) xhr: function xhr() {  //獲取原生的xhr對(duì)象  var xhr = $.ajaxSettings.xhr();  if (xhr.upload) {   //添加 progress 事件監(jiān)聽   xhr.upload.addEventListener('progress', function (e) {    var nowDate = new Date().getTime();    //每一秒刷新一次狀態(tài)    if (nowDate - time >= 1000) {     //已上傳文件字節(jié)數(shù)/總字節(jié)數(shù)     percentage = parseInt(e.loaded / e.total * 100);     //當(dāng)前已傳大小(字節(jié)數(shù))-一秒前已傳文件大小(字節(jié)數(shù))     velocity = (e.loaded - loaded) / 1024;     if (percentage >= 99) {      $(".hintText").html('服務(wù)端正在解析，請(qǐng)稍后');     } else {      //修改上次記錄時(shí)間及數(shù)據(jù)大小      time = nowDate;      loaded = e.loaded;     }    } else {     return;    }   }, false);  }  return xhr; }, success: function success(response) {  //成功回調(diào)    }, error: function error(error) {  //失敗回調(diào)     }});

總結(jié)

以上所述是小編給大家介紹的FormData+Ajax實(shí)現(xiàn)上傳進(jìn)度監(jiān)控，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)錯(cuò)新站長(zhǎng)站網(wǎng)站的支持！