來自xhr循環中的多個進展事件處理程序

Question

我目前正在嘗試構建一個ajax圖片上傳器，並且除了一個重要部分之外，我還有它的工作。

對於每個單獨的文件，我上傳我想更新文件的進度條。目前它只更新最後的文件進度條。

 $("#upload-btn").click(function() { 
      console.log("Click"); 

      for (var i = 0; i < files.length; i++) { 
       var fd = new FormData(); 
       fd.append("file", files[i]); 
       fd.append("__RequestVerificationToken", $("input[name='__RequestVerificationToken']").val()); 

       var xhr = new XMLHttpRequest(); 
       xhr.open('POST', "@Url.Action("AjaxUpload")", true); 

       var filename = files[i].name; 

       xhr.upload.onprogress = function (e) { 
        if (e.lengthComputable) { 
         var percentComplete = (e.loaded/e.total) * 100; 
         console.log(percentComplete + '% uploaded'); 

         var progressbar = $('a[data-name="' + files[i].name + '"]').siblings(".progress").find(".progress-bar"); 
         progressbar.css("width", percentComplete + "%"); 
        } 
       }; 

       xhr.onload = function() { 
        console.log(this.status); 
        if (this.status == 200) { 
         var resp = JSON.parse(this.response); 
         console.log('Server got:', resp); 
        }; 
       }; 

       xhr.send(fd); 
      } 
     }); 

正如你可能已經從代碼中猜到的那樣，我在javascript中非常糟糕......任何幫助都將不勝感激。

Answer 1

您需要在進度回調中確定文件名範圍，目前它只會使用最後一個值i。用你的代碼替換你設置你的onprogress處理程序的地方。

(function(filename) { 
    xhr.upload.onprogress = function (e) { 
     if (e.lengthComputable) { 
      var percentComplete = (e.loaded/e.total) * 100; 
      console.log(percentComplete + '% uploaded'); 

      var progressbar = $('a[data-name="' + filename + '"]').siblings(".progress").find(".progress-bar"); 
      progressbar.css("width", percentComplete + "%"); 
     } 
    }; 
})(files[i].name);