时间戳

首页 > 解决方案 > 一个 XMLHttpRequest 的多个进度条状态

javascript - 一个 XMLHttpRequest 的多个进度条状态

问题描述

尝试通过一个带有多文件上传的 XMLHttpRequest 获取多个进度条状态。new XMLHttpRequests不能使用 jQuery，由于客户端限制，我没有选项循环文件和循环内部。

目前我可以为所有文件组合一个进度条。我需要的是多个进度条百分比。如果我在 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);

标签： javascriptxmlhttprequest

解决方案

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

推荐阅读