这里实现一个带进度的简单上传
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
