Pobierz postęp poszczególnych plików za pomocą XMLHttpRequest

Question

Używam XMLHttpRequest (z jQuery), aby uzyskać postęp przesyłania wielu plików. Dodając detektor zdarzeń "postępu" do obiektu XMLHttpRequest, mogę uzyskać event.loaded i . Te zmienne dają mi załadowane i całkowite bajty wszystkich połączonych plików.

Co chciałbym zrobić, to uzyskać postęp każdego pojedynczego pliku, ale z tego, co widzę, że informacje nie są dostępne z XMLHttpRequest. Czy to prawda?

Nie sądzę, jest to nawet konieczne, ale tutaj jest mój kod:

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; 

Jeśli mogę to osiągnąć z XMLHttpRequest, że byłoby świetnie. Wszelkie informacje na ten temat będą mile widziane.

Answer 1

To co mogę używać,

$.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

Można użyć wtyczki Dropzone.js Javascript. on obsługiwać pliki jeden po drugim, pasek postępu wyświetlania poszczególnych plików, łatwe do zintegrowania, wsparcie mobilnego, 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>

Jeśli spróbujesz uruchom fragment kodu, otrzymasz błąd serwera, ponieważ nie istnieje page_where_upload!