FormData+Ajax怎么實現上傳進度監控

小編給大家分享一下FormData+Ajax怎么實現上傳進度監控，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

什么是FormData？

FormData對象可以組裝一組用 XMLHttpRequest發送請求的鍵/值對。它可以更靈活方便的發送表單數據，因為可以獨立于表單使用。如果你把表單的編碼類型設置為multipart/form-data ，則通過FormData傳輸的數據格式和表單通過submit() 方法傳輸的數據格式相同；

如何創建一個FormData對象

你可以自己創建一個FormData對象，然后通過調用它的append()方法添加字段，就像這樣：

//實例化一個formData對象
var formData = new FormData();
formData.append("username", "Groucho");
formData.append("userid", 123456); // 數字 123456 會被立即轉換成字符串 "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” 是數字類型，它將被FormData.append()方法轉換成字符串類型(FormData 對象的字段類型可以是 Blob, File, 或者 string: 如果它的字段類型不是Blob也不是File，則會被轉換成字符串類型。

使用jQuery的Ajax方法發送FormData數據

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

看完了這篇文章，相信你對“FormData+Ajax怎么實現上傳進度監控”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！