java 批量新增带进度条_批量添加时进度条的实现原理？

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

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

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

HTML:

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);