带进度的简单上传

@拭目以待：首发于带进度的简单上传

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

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参数详解。

@拭目以待

个人站点：www.lovejavascript.com
表格管理插件:gridmanager.lovejavascript.com && github地址
QQ交流群 (452781895)：How To Make Love
微信公众账号：loveJavascript

《野生前端工程师》专辑中所有文章均为@拭目以待 原创，转载请注明出处。