使用 Html5 上传多个文件的进度条答案

【问题标题】：progress bar for Multiple file upload using Html5使用 Html5 上传多个文件的进度条
【发布时间】：2011-12-07 07:25:03
【问题描述】：

当我使用进度事件时，我可以为一个上传请求更新进度条：

function uploadFile(file) {
fileid=md5(file.name);
if {xhr[fileid] ;== undefined} {
        xhr[fileid] = new XMLHttpRequest();
        xhr[fileid].open('POST',' {% url upload %}', true);
        xhr[fileid].setRequestHeader("X-File-Name", file.name);
        xhr[fileid].setRequestHeader("X-File-id", fileid);
        xhr[fileid].upload.addEventListener('progress', onprogressHandler, false);
        xhr[fileid].upload.addEventListener('load',oncompleteHandler,false);
        xhr[fileid].send(file);
}

      function onprogressHandler(event) {
            var percent = event.loaded/event.total*100;
            var $target = $(event.target);
            console.log(uploadHolder[fileid]);
            uploadHolder[fileid].find(".upload-completed").css('width',percent+'%');
            console.log('Upload progress: ' + percent + '%');
        }

但是，当我同时发出两个以上的文件上传请求时，只会更改最后一个文件的进度条。如何确定事件附加到哪个文件上传请求？

更新：如果我将 fileid 声明为 uploadFile 的局部变量，例如 var fileid，我无法在事件处理程序中访问 fileid。在事件处理程序中使用“this”给我 XMLHttpRequestUpload 对象。

【问题讨论】：

您可以通过event.currentTarget.files[n]查看文件详细信息，如果有帮助吗？ (From a previous answer)。
如果上面的代码不起作用，可能是因为fileid的范围没有被正确管理，它被重置为最后一个id（例如在for循环中） .如果是这种情况，您的问题不在您显示的代码范围内 - 您能否显示一次加载多个文件的代码？

标签： javascript ajax file-upload

【解决方案1】：

您应该寻找 javascript 的“闭包”概念。之后，您将了解错误。我认为这个概念非常重要，你应该学习它:)

【讨论】：