Javascript 具有一个XMLHttpRequest的多个进度条状态

尝试通过一个XMLHttpRequest和多文件上载获取多个进度条状态。无法使用jQuery，并且由于客户端限制，我没有循环文件的选项，也没有将

新XMLHttpRequests

放在循环内的选项

目前，我可以有一个进度条为所有文件组合。我需要的是多个进度条百分比。如果我在fileObj循环中执行request.upload.onprogress，则只会更新最后一个进度条

let formData = new FormData(); 
let request = new XMLHttpRequest();
request.open('POST', postUrl);

for( var x in fileObj){
    formData.append("file", fileObj[x]);

    //this is where I tried to put the request.upload.onprogress with dynamic ids but failed.
}

request.upload.onprogress = function (e) {
    if (e.lengthComputable) {
    var percentComplete = (e.loaded / e.total) * 100;
    d.getElementById("progress-bar" ).style.width = percentComplete + "%";
    d.getElementById('progress-bar-output').innerHTML = Math.round(percentComplete) + "%";              
    }
};

request.onload = function (e) {
    console.log( JSON.parse( e.target.response ) );
};

request.send(formData);

---

如果

fileObj

是

FileList

对象，则可以执行以下操作

let formData = new FormData(); 
let request = new XMLHttpRequest();
let info = [];
let acc = 0;
request.open('POST', postUrl);

for (let x in fileObj){
    const file = fileObj[x];
    formData.append("file", file);

    const cutoff = acc += file.size;
    const index = info.length;
    info.push({cutoff, size: file.size, name: file.name, index});
}


request.upload.addEventListener('progress', function (e) {
    if (e.lengthComputable) {
        const percentComplete = (e.loaded / e.total) * 100;
        d.getElementById("progress-bar" ).style.width = percentComplete + "%";
        d.getElementById('progress-bar-output').innerHTML = Math.round(percentComplete) + "%";
        //
        // 
        const file = info.find(({cutoff}) => cutoff <= e.loaded);
        const thisPercentage = 100 * (e.loaded - (file.cutoff - file.size)) / file.size;
        // display file progress here
        // useful info: file.index - i.e. you could show `Uploading File ${file.name} ... ${file.index + 1} of ${info.length}`
    }
});

request.addEventListener('load', function (e) {
    console.log( JSON.parse( e.target.response ) );
};

request.send(formData);

let formData=new formData（）；
let request=new XMLHttpRequest（）；
让信息=[]；
设acc=0；
请求打开（“POST”，姿势）；
for（让x在fileObj中）{
const file=fileObj[x]；
formData.append（“文件”，file）；
const cutoff=acc+=file.size；
常数索引=信息长度；
info.push（{cutoff，size:file.size，name:file.name，index}）；
}
request.upload.addEventListener（'progress'，函数（e）{
if（如长度可计算）{
常量完成百分比=（e.loaded/e.total）*100；
d、 getElementById（“进度条”）.style.width=percentComplete+“%”；
d、 getElementById（'progress-bar-output'）。innerHTML=Math.round（percentComplete）+“%”；
//
// 
const file=info.find（{cutoff}）=>cutoff单个XHR有一个进度-您可以计算每个文件的上载长度，这样您可以计算单个进度是
fileObj
a
FileList
对象？