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