Ottieni lo stato di avanzamento dei singoli file con XMLHttpRequest

Question

Sto utilizzando XMLHttpRequest (con jQuery) per ottenere l'avanzamento del caricamento di più file. Aggiungendo un listener di eventi "progresso" all'oggetto XMLHttpRequest, è possibile ottenere event.loaded e event.total. Quelle variabili mi danno i byte caricati e totali di tutti i file combinati.

Quello che mi piacerebbe fare è ottenere il progresso di ogni singolo file, ma da quello che posso vedere che le informazioni non sono disponibili con XMLHttpRequest. È vero?

non credo che questo è ancora necessario, ma ecco il mio codice:

var xhr = $.ajaxSettings.xhr(); 
if (xhr.upload) { 
    xhr.upload.addEventListener('progress', function(event) { 
     var percent = 0; 
     var position = event.loaded || event.position; 
     var total = event.total; 
     if (event.lengthComputable) { 
      percent = Math.ceil(position/total * 100); 
     } 
     updateProgressBar(percent); 
    }, false); 
} 
return xhr; 

Se posso fare questo con XMLHttpRequest che sarebbe grande. Qualsiasi informazione su questo sarebbe apprezzata.

Answer 1

Questo è quello che uso,

$.ajax({ 
    xhr: function() { 
     myXhr = $.ajaxSettings.xhr(); 
     myXhr.addEventListener('progress', function (e) { }, false); 
     if (myXhr.upload) { 
      myXhr.upload.onprogress = function (e) { 
       var completed = 0; 
       if (e.lengthComputable) { 
        var done = e.position || e.loaded, 
         total = e.totalSize || e.total; 
        completed = Math.round((done/total * 1000)/10); 
       } 
       console.log(completed); // Displays the completed percentage 
      } 
     } 
     return myXhr; 
    } 
}); 

Answer 2

È possibile utilizzare JavaScript plug Dropzone.js. Egli handle di file uno per uno, barra di avanzamento di visualizzazione per ogni file, facile da integrare, supporto mobile, il drag-and-drop, ...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://www.dropzonejs.com/new-js/dropzone.js"></script> 
 
<link rel="stylesheet" href="http://www.dropzonejs.com/css/dropzone.css" /> 
 
<link rel="stylesheet" href="http://www.dropzonejs.com/css/style.css" /> 
 

 
<form action="/page_where_upload" class="dropzone"> 
 
    <div class="fallback"> 
 
    <input name="file" type="file" multiple /> 
 
    </div> 
 
</form>

Se si tenta di eseguire lo snippet, si verificherà un errore del server perché page_where_upload non esistono!