как отслеживать состояние готовности для каждого файла с помощью 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);
 }

, делая это. I xhr [имя файла] внутри onreadystatechange не определен из-за цикла, и я хочу отслеживать каждую загрузку файлапрогресс и закончить это.Но, как вы можете видеть, проблема заключается только в отслеживании 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);
 }