博客一个月没更新了，着实是有点忙。
目前公司新版上线也到最后一波了，部分人员转战了一个新的APP产品的开发。
主体还是原生APP，也会有部分页面需要嵌入WEB页面，我也有幸作为唯一的前端人员加入了。

不过这次讲的内容跟这个APP没有半毛钱关系，是公司内部工作系统的一个扫码上传功能。
好吧，我参与的确实有点多！

要实现实时的进度展示，需要以下几个关键：

  1. 异步上传
  2. 文件总大小
  3. 文件已上传大小

基本HTML结构

<input type="file" id="upload" accept="image/*" >

异步上传

XHR是必须的，此外还需要一个FormData对象。

FormData，译为表单数据，也就是一个保存表单数据的容器。
可以利用这个对象写入键值对的数据项，再用xhr发送到处理接口。

var data = new FormData();
data.append('id', 9527);
data.append('name', '张三');
data.append('sex', '男');

不仅可以像以上简单的添加值类型，文件类型也不例外。
这样就可以直接使用xhr的send方法发送到后端。

document.querySelector('#upload').addEventListener('change', function() {
    var file = this.files[0],
        data = new FormData();
        
    data.append('photo', file);
    
    var xhr = new XMLHttpRequest();
    xhr.addEventListener('load', function(event){
        // Success or Error
    }, false);
    xhr.open('post', '/doLoad');
    xhr.send(data);
    
});

上传进度

与FormData相对应的上传状态监听事件

xhr.upload.addEventListener('progress', function(event){
    // do...
}, false);

该事件可以通过event对象获取上传状态。

  1. event.loaded: 已上传大小
  2. event.total: 文件总大小

这样计算进度就不在话下了，具体实现也就不废话了，众大侠各展神通吧！