AJAX上传进度条 ES6版本
之前写过一个基于jquery的版本,考虑到ES6的强大,把之前的版本改造一下,基于ES6的代码会更简洁,更强大,拓展性能更高,思路基本一致,直接放代码,就当做个笔记了,随时查阅。
代码下载:uper.js
const uper = {
// 创建进度条
line(params) {
// 图显
let dom = document.createElement('div');
dom.className = 'uperLine';
dom.style.cssText = `width: 100%; height: ${params.height}px; line-height: 100px; background: ${params.color}; position: relative; left: -100%`;
params.dom.appendChild(dom);
},
// 进度条运动
run(runNum) {
document.querySelector('.uperLine').style.left = (100 - runNum) * -1 + '%';
},
// 发送上传请求
post(url, data) {
// 创建promise对象
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
// 监听上传进度
xhr.upload.onprogress = (e) => {
this.run( parseFloat(e.loaded / e.total * 100).toFixed(2) );
}
// 先创progress建监听器,再发送请求,否则无法执行upload.progress
xhr.open('POST', url, true);
xhr.send(data);
// 先发送数据,再获取状态,否则会直接执行reject回调
xhr.onreadystatechange = () => {
if (xhr.status == 200) {
if (xhr.readyState == 4) resolve(JSON.parse(xhr.response));
} else {
reject({ status: xhr.status, readyState: xhr.readyState, response: xhr.response });
}
}
})
},
// 初始化
init(params){
this.line(params);
}
}
// 使用方法
// 引入uper之后,进行初始化
// 参数传入一个对象:
// dom:把进度条显示在这个dom里
// height:进度条高度,单位px(宽度是dom的100%
// color:进度条颜色
// 2019-08-30更新:有人建议加一个数字显示的进度,暂时没想好加在哪里,后面会加上。
uper.init({
dom: document.querySelector('.uper'),
height: 2,
color: '#4AC2B7'
});
// 上传文件
document.querySelector('button').onclick = (e) => {
let file = document.querySelector('input').files[0];
let data = new FormData();
data.append('file', file);
// uper内置了ajax.post方法,直接调用user.post即可
uper.post('你的上传接口', data);
}
之前的文章,飞机直达:http://blog.xuxiangbo.com/im-22.html
本文标签: ajax进度条