什么是FormData？
FormData對象可以組裝一組用 XMLHttpRequest發(fā)送請求的鍵/值對。它可以更靈活方便的發(fā)送表單數(shù)據(jù)，因為可以獨立于表單使用。如果你把表單的編碼類型設置為multipart/form-data ，則通過FormData傳輸?shù)臄?shù)據(jù)格式和表單通過submit() 方法傳輸?shù)臄?shù)據(jù)格式相同；
如何創(chuàng)建一個FormData對象
你可以自己創(chuàng)建一個FormData對象，然后通過調(diào)用它的append()方法添加字段，就像這樣：
//實例化一個formData對象
var formData = new FormData();
formData.append("username", "Groucho");
formData.append("userid", 123456); // 數(shù)字 123456 會被立即轉(zhuǎn)換成字符串 "123456"
// HTML上的 文件類型input[type=file]的文件框，由用戶選擇
formData.append("userfile", fileInputElement.files[0]);
// JavaScript file-like 對象
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” 都包含一個文件. 字段 “userid” 是數(shù)字類型，它將被FormData.append()方法轉(zhuǎn)換成字符串類型(FormData 對象的字段類型可以是 Blob, File, 或者 string: 如果它的字段類型不是Blob也不是File，則會被轉(zhuǎn)換成字符串類型。
使用jQuery的Ajax方法發(fā)送FormData數(shù)據(jù)
//記錄當前時間
var time=new Date().getTime();
//記錄當前進度
var percentage =null;
//記錄當前上傳速度
var velocity=null;
//記錄已上傳文件字節(jié)大小
var loaded=0;
$.ajax({
url: 'Url',
type: "POST",
data: formData,
contentType: false, // 必須 不設置內(nèi)容類型
processData: false, // 必須 不處理數(shù)據(jù)
xhr: function xhr() {
//獲取原生的xhr對象
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);
//當前已傳大小(字節(jié)數(shù))-一秒前已傳文件大小(字節(jié)數(shù))
velocity = (e.loaded - loaded) / 1024;
if (percentage >= 99) {
$(".hintText").html('服務端正在解析，請稍后');
} else {
//修改上次記錄時間及數(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實現(xiàn)上傳進度監(jiān)控，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:- JS中使用FormData上傳文件、圖片的方法
- jQuery用FormData實現(xiàn)文件上傳的方法
- jQuery Ajax使用FormData對象上傳文件的方法
- 談談基于iframe、FormData、FileReader三種無刷新上傳文件的方法
- JS FormData上傳文件的設置方法
- jQuery+formdata實現(xiàn)上傳進度特效遇到的問題
- 通過Ajax使用FormData對象無刷新上傳文件方法
- vuejs使用FormData實現(xiàn)ajax上傳圖片文件
- jQuery Ajax使用FormData上傳文件和其他數(shù)據(jù)后端web.py獲取
- 使用FormData實現(xiàn)上傳多個文件
