徐向博 / Imin.

AJAX上传进度条 ES6版本
作者:Imin 时间:2019-08-28 分类: 前端

之前写过一个基于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进度条

超人下拉: 有没有测试过,好用的不 2019-09-24 14:01
热搜: 文章不错非常喜欢 2019-09-22 00:04