javascript - 管理多个文件上传的进度条

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

根据 [MDN][1]:

Note: You need to add the event listeners before calling open() on the request. Otherwise the progress events will not fire.

因此，将这些知识与 Engin 的答案结合起来，您可以这样做:

const images = document.getElementById('images');
const completedCount = 0; // added for loadend scenario
const length = images.files.length;

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

    const xmlhttp = new XMLHttpRequest();
    (elId => {
        xmlhttp.upload.addEventListener('progress', 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', () => {
        completedCount++;
        if (completedCount == length) {
            // here you should hide your gif animation
        }
    }, false);
    // ---
    xmlhttp.open('POST', '/pictures/uploadImage');
    xmlhttp.send(formData);
}

更新:

要在所有文件上传后捕获事件，您可以使用 loadend 事件。我已经更新了我的代码(见评论)，但我不确定这是正确的方法。[1]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress