如何使用 html5 xmlhttprequest 对象跟踪每个文件的就绪状态

Question

下面是我使用 XMLHttpRequest send 方法上传文件的代码

  function send_file_to_server(file,id)
   {
     console.log('send_file_to_server id received = ' + id);
     var filename = file.name;
     var container_name = $("#gs-file-upload-container").find(':selected').text();
     var xhr =  new XMLHttpRequest();    
     xhr.upload.onprogress = function(e)
      {
         console.log(' bytes loaded =  '+e.loaded + ' remaining = ' +  e.total);  
      }
      xhr.onreadystatechange = function()
      {            
           if(xhr.status == 200 && xhr.readyState == 4){
                    on_upload_complete( filename,id,xhr);
      }

     var queryString = 'http://upload_files?filename='+filename+'&cname='+container_name;
         xhr.open("POST", queryString, true);
         xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
         xhr.setRequestHeader("X-File-Name", encodeURIComponent(filename));
         xhr.setRequestHeader("Content-Type", "application/octet-stream");
         xhr.send(file);
 }

使用上面的函数，我等待 on_upload_complete 被调用，然后传递第二个文件对象，然后我正在上传一个一个文件对象。有人可以建议我如何使其同时上传吗？我尝试在下面执行此操作，因为

var xhr = Array();
function send_file_to_server(file,id)
   {
     console.log('send_file_to_server id received = ' + id);
     var filename = file.name;
     var container_name = $("#gs-file-upload-container").find(':selected').text();
     xhr[filename] =  new XMLHttpRequest();    
     xhr[filename].upload.onprogress = function(e)
      {
         console.log(' bytes loaded =  '+e.loaded + ' remaining = ' +  e.total);  
      }
      xhr[filename].onreadystatechange = function()
      {            
           if(xhr[filename].status == 200 && xhr[filename].readyState == 4){
                    on_upload_complete( filename,id,xhr);
      }

     var queryString = 'http://upload_files?filename='+filename+'&cname='+container_name;
         xhr[filename].open("POST", queryString, true);
         xhr[filename].setRequestHeader("X-Requested-With", "XMLHttpRequest");
         xhr[filename].setRequestHeader("X-File-Name", encodeURIComponent(filename));
         xhr[filename].setRequestHeader("Content-Type", "application/octet-stream");
         xhr[filename].send(file);
 }

通过执行此操作，onreadystatechange 内的 xhr[filename] 由于循环而未定义，我想跟踪每个文件上传进度并完成它。但正如你所看到的，问题只是用唯一的 id 跟踪 onreadystatechange，而我被困在这里。请任何人提供帮助，我们将不胜感激。谢谢

Answer 1

你已经处理过 Javascript Closure 了。 onreadystatechange 查看 send_file_to_server 函数最新调用的filename,id,xhr。要更改此重写您的函数，如下所示：

var xhr = Array();
function send_file_to_server(file,id)
   {
     console.log('send_file_to_server id received = ' + id);
     var filename = file.name;
     var container_name = $("#gs-file-upload-container").find(':selected').text();
     xhr[filename] =  new XMLHttpRequest();    
     xhr[filename].upload.onprogress = function(e)
      {
         console.log(' bytes loaded =  '+e.loaded + ' remaining = ' +  e.total);  
      }
    (function(localFilename, localId, localXhr){
        localXhr[localFilename].onreadystatechange = function(){  
           if(localXhr[localFilename].status == 200 && localXhr[localFilename].readyState == 4){
                    on_upload_complete(localFilename, localId, localXhr);
            }
     }
    })( filename,id,xhr)

     var queryString = 'http://upload_files?filename='+filename+'&cname='+container_name;
         xhr[filename].open("POST", queryString, true);
         xhr[filename].setRequestHeader("X-Requested-With", "XMLHttpRequest");
         xhr[filename].setRequestHeader("X-File-Name", encodeURIComponent(filename));
         xhr[filename].setRequestHeader("Content-Type", "application/octet-stream");
         xhr[filename].send(file);
 }