如何使用 HTML5 XMLhttpRequest 对象跟踪每个文件的就绪状态 - how to track the ready state for each file with html5 xmlhttprequest object

how to track the ready state for each file with html5 xmlhttprequest object

下面是我使用 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[文件名] 由于循环而未定义，我想跟踪每个文件上传进度并完成它。但正如你所看到的，问题只是使用唯一的ID跟踪onreadystatechange，而我被困在这里。请任何人都可以投光，建议和建议帮助是赞赏。谢谢

你已经处理了Javascript闭包。 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);
 }