XMLHTTPREQUEST–獲取上傳文件的進度

最近作了一個項目，其中一個需求是顯示文件上傳進度。因爲對XMLHttpRequest對象的瞭解不夠，以致於浪費了不少時間。今天主要來講一下XMLHttpRequest對象中獲取文件上傳進度的方法,
代碼以下：

<input type="file" name="fileUpload" id="fileUpload" onchange="Upload();"/>

function Upload() {
//獲取上傳文件
    var file = document.getElementById('fileUpload').files[0];  
  //建立表單數據
  var formData = new FormData();
  formData.append('file', file);
  //建立xhr對象
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '請求路徑', true);
  xhr.onload = uploadCom; //請求完成
  xhr.onerror =  uploadFail; //請求失敗
  xhr.upload.onprogress = progressFunction;//上傳進度調用方法實現
  xhr.send();
  xhr.onreadystatechange = function () {
          if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                let body = JSON.parse(xhr.responseText);
                let data= body.data;
                self.setState({'to_user_arr':data})
            }else{
               try{
                    let  msg = JSON.parse(xhr.responseText)["msg"];
                    message.error(msg,10);
                }catch(e){}
            }
          }
        };
}
function progressFunction(evt) {
// evt.total是須要傳輸的總字節，evt.loaded是已經傳輸的字節。若是evt.lengthComputable不爲真，則evt.total等於0
if (evt.lengthComputable) {//
       console.log('當前上傳進度'+Math.round(evt.loaded / evt.total * 100) + "%")
             }
        }
//上傳成功響應
function uploadCom(evt) {
 //服務斷接收完文件返回的結果
    alert("上傳成功！");
}
//上傳失敗
function uploadFail(evt) {
    alert("上傳失敗！");
}
//取消上傳
function cancleUpload(){
    xhr.abort();
}

XMLHttpRequest對象，傳送數據的時候，有一個onprogress事件，用來返回進度信息。咱們能夠經過onprogress事件來實時顯示進度，默認狀況下這個事件每50ms觸發一次。
progressFunction函數中：
1.total - 總的字節數
2.loaded - 到目前爲止上傳的字節數
3.lengthComputable - 可計算的已上傳字節
注：cancleUpload這個函數只要調用一下就能取消上傳

拓展：既然XMLHttpRequest對象能夠獲取上傳進度，固然也能夠或許下載進度。須要注意的是，上傳過程和下載過程觸發的是不一樣對象的onprogress事件：
① 上傳觸發的是xhr.upload對象的 onprogress事件
② 下載觸發的是xhr對象的onprogress事件