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个进度条，但只有last（3rd）进度条显示第3个文件的进度。我检查了所有“错误”，“加载”，“进度”和“中止”事件，如果有任何错误但根本没有。即使所有上传请求都在“加载”事件上发出消息。

Answer 1

<强> 问题

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

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

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

<强> 解决方案

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

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

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

1 个答案: