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

Question

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

  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 闭包。 onreadystatechange 参见 filename,id,xhr 的最新调用 send_file_to_server 函数。要改变这个重写你的函数是这样的：

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