Associer le nom de fichier à XMLHttpRequest

Question

J'essaie de fournir une solution permettant le téléchargement d'un fichier vers une API REST avec un back-end C#. Actuellement, je suis capable de télécharger les fichiers et d'obtenir la progression de leurs téléchargements en utilisant XMLHttpRequests et JavaScript. Le problème que je rencontre est que tous les fichiers sont téléchargés simultanément et que je vois des messages de console mixtes avec la progression du téléchargement.

Ma question est la suivante: Y a-t-il un moyen pour moi d'associer le nom de fichier ou l'information de fichier transmise depuis le formulaire pour que je puisse déterminer les progrès du fichier que je suis en train de regarder?

regardant la variable e dans le onprogress je ne pouvais trouver aucun identificateur pour le fichier, sauf pour les tailles des fichiers qui est logique si le téléchargement est considéré comme sa propre entité.

Mon code est ci-dessous avec la tentative de journal de la console pour trois fichiers:

formulaire 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 

} 

}); 

CONSOLE DE TROIS TENTATIVE DE FICHIER

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%  

Answer 1

Si vous avez un objet qui contient des informations sur le fichier, vous pouvez joindre cet objet à XHR (xhr.fileInfo = {filename: "" + files[i].name}), et cet objet devrait être disponible lors de la manipulation de votre événement.