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个文件，那么它仅显示第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 + "%");

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

解

而不是从单个循环发送文件，而是从另一个循环发送文件，而从另一个循环调用您的上传函数，并在其中提供文件作为参数。 与此类似

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