Javascript 管理多文件上载的进度条

所以我使用ajax上传多个文件。一切似乎都很有魅力。。。我就是不能让我的进度条工作

任何帮助都将不胜感激。谢谢

var images = document.getElementById('images');
for(var i=0;i<images.files.length;i++) {
    var formData = new FormData();
    var image = images.files[i];
    formData.append('image', image);
    formData.append('order_id', document.getElementById('order_id').value);

    var xmlhttp=new XMLHttpRequest();
    xmlhttp.open("POST","/pictures/uploadImage");
    xmlhttp.send(formData);
    xmlhttp.upload.addEventListener('progress', function(e){
        document.getElementById("image_"+i+"_progress").value = Math.ceil(e.loaded/e.total)*100;
    }, false);
}

var images=document.getElementById（'images'）；
for（var i=0；i我没有尝试，但我认为它有效，因为for循环在您的帖子之前完成，并且“i”的值等于images.files.length

试试这个：

var images = document.getElementById('images');

for(var i=0;i<images.files.length;i++) {
    getProgress(images.files[i],i); 
}

function getProgress(image,order){
    var formData = new FormData();
    formData.append('image', image);
    formData.append('order_id', document.getElementById('order_id').value);

    var xmlhttp=new XMLHttpRequest();
    xmlhttp.open("POST","/pictures/uploadImage");
    xmlhttp.send(formData);
    xmlhttp.upload.addEventListener('progress', function(e){
        document.getElementById("image_"+order+"_progress").value = Math.ceil(e.loaded/e.total)*100;
    }, false);
}

var images=document.getElementById（'images'）；
对于（var i=0；i根据：

注意：在对请求调用open（）之前，需要添加事件侦听器。否则将不会触发进度事件

因此，结合这些知识和Engin的答案，您可以这样做：

var images = document.getElementById('images');
var completedCount = 0; // added for loadend scenario
var length = images.files.length;
for (var i = 0; i < length; i++) {
    var formData = new FormData();
    var image = images.files[i];
    formData.append('image', image);
    formData.append('order_id', document.getElementById('order_id').value);

    var xmlhttp = new XMLHttpRequest();
    (function(elId) {
        xmlhttp.upload.addEventListener('progress', function (e) {
            document.getElementById("image_" + elId + "_progress").value = Math.ceil(e.loaded / e.total) * 100;
        }, false);
    })(i); // to unbind i.
    // --- added for loadend scenario. ---
    xmlhttp.addEventListener("loadend", function(){
        completedCount++;
        if (completedCount == length) {
            // here you should hide your gif animation
        }
    }, false);
    // ---
    xmlhttp.open("POST", "/pictures/uploadImage");
    xmlhttp.send(formData);
}

var images=document.getElementById（'images'）；
var completedCount=0；//为loadend方案添加
var length=images.files.length；
对于（变量i=0；i

更新：
要在上载所有文件时捕获事件，您可以使用
loadend
事件。我已经更新了代码（请参阅注释），但我不确定这是否正确。
您可以包含其他函数

function upload(ProgressbarId){

    /*
     .
     .
     .
     some code
    */

    xmlhttp.upload.addEventListener("progress", function(evt){uploadProgress(evt,ProgressbarId);}, false);

}


function uploadProgress(evt,ProgressbarId) {

    if (evt.lengthComputable) {
        var percentComplete = Math.round(evt.loaded * 100 / evt.total);
        set_Progressbar(ProgressbarId,percentComplete);
    }
}

}
工作起来很有魅力。谢谢。我有一个后续问题，假设我正在上传8个文件，那么我如何构建一个事件侦听器，以便在所有文件上传完成后启动。基本上，我将用加载gif替换我的提交按钮。一旦所有文件上传完毕，我想停止加载gif，并用一些东西更改它上面写着“完成”。谢谢。我已经更新了我的答案，虽然我不确定这是最好的方法，而且我还没有测试过。