Question

所以我使用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);
}

我基本上是单独上传图片..我想这可以帮助我更好地跟踪进度条......也许还有另一种方法。

Answer 1

我没有尝试，但我认为它有效，因为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);
}

Answer 2

根据MDN：

注意：您需要在请求上调用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);
}

更新

要在上传所有文件时捕获事件，您可以使用loadend个事件。我已经更新了我的代码（请参阅注释），但我不确定这是否正确。

Answer 3

您可以添加其他功能。

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

}

管理多文件上载的进度条

3 个答案:

更新