带进度的简单上传

ajax上传,上传进度

拭目以待 发布于

这里实现一个带进度的简单上传

html片段

<input type="file" onchange="upload(this)" />


上传函数

function upload(obj){
var fd = new FormData();
fd.append('name', 'baukh');
fd.append('pic', obj.files[0]);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  console.log(xhr.status);
};
xhr.upload.onprogress = function(e){
console.log('upload', Math.round(e.loaded * 100 / e.total));
}
xhr.open('POST', 'http://www.lovejavascript.com/learnLinkManager/getLearnLinkList', true);
xhr.send(fd);
}


执行效果如下

通过xhr.upload.onprogress事件中捕获到的event对象来实现上传进度功能



如果想了解更多的XMLHttpRequest参数,请查阅XMLHttpRequest参数详解