@拭目以待:首發(fā)于帶進(jìn)度的簡單上傳
這里實(shí)現(xiàn)一個(gè)帶進(jìn)度的簡單上傳
html片段
<input type="file" onchange="upload(this)" />
上傳函數(shù)
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);
}
執(zhí)行效果如下
通過xhr.upload.onprogress事件中捕獲到的event對象來實(shí)現(xiàn)上傳進(jìn)度功能裸诽。
如果想了解更多的XMLHttpRequest參數(shù),請查閱XMLHttpRequest參數(shù)詳解搞乏。
@拭目以待
個(gè)人站點(diǎn):www.lovejavascript.com
表格管理插件:gridmanager.lovejavascript.com && github地址
QQ交流群 (452781895):How To Make Love
微信公眾賬號:loveJavascript