批量添加时进度条的实现原理？

Question

1.要实现批量添加时显示进度
2.后台给了批量添加的接口
3.使用uib-progressbar进度条插件
4.问题：我现在怎么根据找到添加的进度，进行显示？没有思路，请大神们指导一下。

Answer 1

去看一下promise，可以获取到进度
https://segmentfault.com/a/11...

如果你是批量添加文件的话，例如组件angular-file-uploader本身就提供方法

Answer 2

批量添加是指下面这种吗？？：

如果是的话，先看看效果哈：

我的实现方式比较简单，ajax 的 upload 对象 的 progress 事件 + formData 对象实现进度条：

HTML:

<input type='file' id='upload_files' multiple='multiple' />

Js:

// ajax 对象
var ajax = new XMLHttpRequest();
// 预置的 formdata 对象，详情查看 ajax level 2。阮一峰的文章里面有详细介绍...
var formdata = new FormData();
// 表单对象
var inp = document.getElementById('upload_files');
var files = inp.files;


for (var i = 0; i < files.length; ++i)
    {
        formdata.append('upload[]' , files[i]);
    }
ajax.open(url , method , isAsync);

// 上传进度事件
ajax.upload.onprogress = function(event){
    if (event.lengthComputable) {
        var uploaded = event.loaded;
        var total    = event.total;
        var ratio    = uploaded / total * 100;
        console.log('上传百分比：' + ratio + '%');
    }
};

// 上传完成事件
ajax.upload.load = function(){
    console.log('上传完成');
}
ajax.send(formdata);

Answer 3

angular1 版本： http://nervgh.github.io/pages...

angular2 版本：https://github.com/valor-soft...