并发Ajax文件上传调用的单个进度栏

Question

我正在构建一个插件，可以在一个选择中上传多个文件，并带有一个相关的进度栏。 我向所选文件发送了一个ajax调用，因此进度条易于实现。

现在，我正在为n个发送n个Ajax调用。一次选择的文件数量，我想在一个进度栏中显示所有ajax调用的文件上传进度。

       <div class="progress" style="width:610px;height:23px;margin-bottom: 0px;">
     <div id="progressBar" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%;"> 
  </div>
 </div>


function fileUploaded(){

    console.log("File Parsing");
    var fileInput = document.getElementById('suppDocsNew');
    var fileList = [];
    var fileNameList = [];
    var totalSum = 0;
    for (var i = 0; i < fileInput.files.length; i++) {
        fileList.push(fileInput.files[i]);
        fileNameList.push(fileInput.files[i].name);
        totalSum = totalSum + fileInput.files[i].size;
        console.log(fileInput.files[i]);
    }
    console.log(fileNameList);
    var checks = suppDocUploadChecks(fileNameList);
    if(checks){
    if(checkSingleFileSize(totalSum)){

        /**File Upload Code Start***/
        var files = fileInput.files;

        // Loop through each of the selected files.
        for (var i = 0; i < files.length; i++) {
          var file = files[i];
          // Add the file to the request.
          var formData = new FormData();
          formData.append('suppDOC', file, file.name);
          /**File Upload Code Start***/
            uploadMultipleSuppDoc(formData , totalSum);
        }


    }else{
        showSimpleMessage(msgTitle,'<%=AppConfig.getInstance().get("upload.sup.file.exceed")%>');
    }
    }
    //document.getElementById('suppDocReadOnlyText').innerText = fileInput.files.length;
}

function uploadMultipleSuppDoc(formData , totalSum){
    // Set up the request.
    var xhr = new XMLHttpRequest();
    xhr.upload.addEventListener("progress", progressHandler, false);
     xhr.addEventListener("load", completeHandler, false);
     /*xhr.addEventListener("error", errorHandler, false);
    xhr.addEventListener("abort", abortHandler, false); */
    // Open the connection.
    xhr.open('POST', 'tempUpload.do?action=addDocument&_multipartResolverDisable=1&support=support', true);
    // Set up a handler for when the request finishes.
    xhr.onload = function () {
      if (xhr.status === 200) {
        // File(s) uploaded.
        console.log(xhr.responseText);
        var responseData = JSON.parse(xhr.responseText); 
          //showSimpleMessage(msgTitle,'File Uploaded Successfully.. ' + (totalSum/1048576).toFixed(2) + ' MB');
            if (responseData.success == 'true') {
                var fileModel = Ext.define('fileModel', {
                    extend: 'Ext.data.Model',
                    fields: [
                        {name: 'fileName',  mapping: 'fileName', type: 'string'},
                        {name: 'fileSize', mapping: 'fileSize', type: 'string'}
                    ]
                });
                var myReader = new Ext.data.reader.Json({
                    totalProperty: "totalCount",
                    root: "list",
                    idProperty: "fileName",
                    model: fileModel
                });
                var list = myReader.readRecords(responseData).records;                  
                if (list.length == 0) {
                    //alert('No documents uploaded.');
                    showSimpleMessage(msgTitle,'No documents uploaded.');
                    /* fform.reset();
                    return; */
                }
                for (var i = 0; i < list.length; i++) {
                    CDD.ReportDocUpload.addNewDoc(list[i].get('fileName'), list[i].get('fileSize'));
                    CDD.ReportDocUpload.loadProgressBar();
                }
            }else{
                //alert(responseData.message);
                showSimpleMessage(msgTitle,responseData.message);
            }
      } else {
        alert('An error occurred!');
      }
    };
    // Send the Data.
    xhr.send(formData);
}


function _(el){
    return document.getElementById(el);
}

function progressHandler(event){
    var percent = (event.loaded / event.total) * 100;
    _("progressBar").innerHTML = Math.round(percent)+"%";
    _("progressBar").setAttribute("aria-valuenow", Math.round(percent));
    _("progressBar").style.width = Math.round(percent)+"%";
}
 function completeHandler(event){

     _("progressBar").innerHTML = "";
     _("progressBar").setAttribute("aria-valuenow", "0");
     _("progressBar").style.width = 0 +"%";
}

任何建议或帮助都会得到应用。