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事件