AJAX 上传仅显示多个文件上传中最后一个元素的进度

Question

我有这个代码

for(var i=0; i<ObjectMover.length; i++)
{
    var formdata = new FormData();
    formdata.append("fl", ObjectMover[i]);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", function(ev) 
    {
        if(ev.lengthComputable) 
        {
             $('#pb'+i).css('width', (ev.loaded / ev.total) * 100 + "%");
        }
    }, false);
    ajax.open("POST", "file_upload.php");
    ajax.send(formdata);
}

此代码运行良好，但问题是当我上传多个文件时说 3 个文件，它只显示第三次上传的进度。虽然它正在将所有文件上传到服务器，但仅显示最后一个文件的进度。我通过把 console.log(i);正在进行的事件，如

    ajax.upload.addEventListener("progress", function(ev) 
    {
        if(ev.lengthComputable) 
        { 
                         console.log(i);
             $('#pb'+i).css('width', (ev.loaded / ev.total) * 100 + "%");
        }
    }, false);

控制台仅显示最后一个文件编号 (3)。为什么？我在哪里犯错。虽然我在其他文件中有相同的代码，并且与上面的代码一样工作得很好。使用我上面的代码，每个文件分别有 3 个进度条，但只有最后一个（第 3 个）进度条显示第 3 个文件的进度。我检查了我所有的“错误”、“加载”、“进度”和“中止”事件是否有任何错误但根本没有。甚至所有上传请求都在“加载”事件上给出消息。

Answer 1

问题

这很简单，因为在您的代码中

  $('#pb'+i).css('width', (ev.loaded / ev.total) * 100 + "%");

i 设置为您的 for 循环的总文件长度，因此它只是为您的 提供宽度i 进度条，无论哪个 progress 事件响应，它都是最后一个。

解决方案

不是从单个循环发送文件，而是从另一个循环发送您的文件，从该循环调用您的上传函数，将您的文件作为其中的参数。类似的东西

function UploadMyFilesQueue()
{
    for(var i=0; i<files.length; i++)
    {
          UploadThisFile(files[i], i);
    }
}

function UploadThisFile(file, pbid)
{
    var formdata = new FormData(); 
    formdata.append("fl", file);
    var ajax = new XMLHttpRequest();
    ajax.send(formdata);
}