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

下面是我使用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，我被困在这里。请任何人抛头露面，建议和建议帮助，不胜感激。谢谢

您已经处理了Javascript闭包

onreadystatechange

请参见

文件名、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);
 }

---

什么是localXhr和localId？我有edit

filename，id，xhr

vars在全局范围内

localFilename，localId，localXhr

vars在局部范围内我很高兴我的知识是有用的）