上传文件进度

上传文件进度

如何获取到文件的上传进度

Javascript 的 XMLHttpRequest 提供了一个 progress 事件，这个事件会返回文件已上传的大小和总大小;

这个事件会在浏览器接收新数据期间周期性地触发。而onprogess事件处理程序会接收到一个 event对象，target属性是 XHR对象

var formData = new FormData();
formData.append("file", document.getElementById("file").files[0]);
formData.append("token", token_value); // 其他参数按这样子加入

var xhr = new XMLHttpRequest();
xhr.open("POST", "/uploadurl");
// 上传完成后的回调函数
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log("上传成功");
  } else {
    console.log("上传出错");
  }
};
// 获取上传进度
xhr.upload.onprogress = function(event) {
  if (event.lengthComputable) {
    var percent = Math.floor((event.loaded / event.total) * 100);
    // 设置进度显示
    $("#J_upload_progress").progress("set progress", percent);
  }
};
xhr.send(formData);

XHR

function reqListener() {
  console.log(this.responseText);
}

var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("GET", "http://www.example.org/example.txt");
oReq.send();