將文件名與XMLHttpRequest關聯

我試圖提供一個解決方案，允許將文件上傳到帶有C＃後端的REST API。目前，我可以使用XMLHttpRequests和JavaScript上傳文件並獲取他們上傳的進度。我遇到的問題是所有文件併發上傳，並且我看到混合控制檯消息和上傳進度。將文件名與XMLHttpRequest關聯

我的問題如下：有沒有一種方法可以將表單中傳入的文件名或文件信息關聯起來，以便我可以確定當前正在查看哪個文件的進度？

望着onprogress內e可變我無法找到任何標識符除了上載是否被認爲是其自己的實體這是有道理的文件的大小的文件。

我的代碼是下面的三個文件控制檯日誌的嘗試：

HTML表單：

<form id="uploadForm" method="post"> 
    <input type="file" name="files[]" multiple/> 
    <input type="button" id="uploadButton" value="Save" /> 
</form>

JAVASCRIPT

$('#uploadButton').click(function() { 

var files = document.forms['uploadForm']['files[]'].files; //Gather files from the form 
for(var i = 0; i < files.length; i++) { //for each file 
    console.log(files[i].name + "; " + files[i].type + "; " + files[i].size); //log file info 
    var form = new FormData(); 
    form.append(files[i].name, files[i]); //create a new form and push the file into it 

    var xhr = new XMLHttpRequest(); //create a new request 
    xhr.upload.onprogress = function (e) { //tell xmlhttprequest what to do on upload progress update 
     var done = e.position || e.loaded, total = e.totalSize || e.total; //onprogress function logs to console the proper percentage 
     console.log('xhr.upload progress: ' + done + '/' + total + ' = ' + (Math.floor(done/total * 1000)/10) + '%'); 
    }; 
    xhr.open("post", "/api/contact", true); //open request 
    xhr.send(form); // send form 

} 

});

控制檯從三種文件未遂

Index:91 1184x1600.png; image/png; 1467392 
Index:91 Example.pdf; application/pdf; 65391 
Index:91 FileZilla_3.27.0.1_win64-setup.exe; application/x-msdownload; 7873888 
Index:98 xhr.upload progress: 65588/65588 = 100% 
Index:98 xhr.upload progress: 65536/1467587 = 4.4% 
Index:98 xhr.upload progress: 32768/7874140 = 0.4% 
Index:98 xhr.upload progress: 1294336/1467587 = 88.1% 
Index:98 xhr.upload progress: 1425408/7874140 = 18.1% 
Index:98 xhr.upload progress: 1467587/1467587 = 100% 
Index:98 xhr.upload progress: 3915776/7874140 = 49.7% 
Index:98 xhr.upload progress: 6127616/7874140 = 77.8% 
Index:98 xhr.upload progress: 7874140/7874140 = 100%

來源

2017-10-05 Ibrennan208