Jak uzyskać postęp z XMLHttpRequest

Czy można uzyskać postęp XMLHttpRequest (przesłane bajty, pobrane bajty)?

Byłoby to przydatne, aby wyświetlić pasek postępu, gdy użytkownik przesyła duży plik. Wydaje się, że standardowe API go nie obsługuje, ale może istnieje jakieś niestandardowe rozszerzenie w którejkolwiek z przeglądarek? Wydaje się, że to dość oczywista funkcja, ponieważ klient wie, ile bajtów zostało przesłanych / pobranych.

uwaga: zdaję sobie sprawę z alternatywy „sonduj serwer w poszukiwaniu postępu” (właśnie to robię w tej chwili). główny problem z tym (inny niż skomplikowany kod po stronie serwera) polega na tym, że zazwyczaj podczas przesyłania dużego pliku połączenie użytkownika jest całkowicie zamknięte, ponieważ większość dostawców usług internetowych oferuje słabe przesyłanie danych. Dlatego tworzenie dodatkowych próśb nie jest tak responsywne, jak się spodziewałem. Miałem nadzieję, że będzie sposób (może niestandardowy), aby uzyskać te informacje, które przeglądarka ma przez cały czas.

Dla przesłanych bajtów jest to dość łatwe. Po prostu obserwuj xhr.upload.onprogresswydarzenie. Przeglądarka zna rozmiar plików, które musi przesłać, i rozmiar przesłanych danych, dzięki czemu może dostarczyć informacje o postępie.

W przypadku pobranych bajtów (podczas pobierania informacji xhr.responseText) jest to trochę trudniejsze, ponieważ przeglądarka nie wie, ile bajtów zostanie wysłanych w żądaniu serwera. Jedyne, co przeglądarka wie w tym przypadku, to rozmiar odbieranych bajtów.

Jest na to rozwiązanie, wystarczy ustawić Content-Lengthnagłówek w skrypcie serwera, aby uzyskać całkowity rozmiar bajtów, które przeglądarka ma otrzymać.

Więcej informacji można znaleźć pod adresem https://developer.mozilla.org/en/Using_XMLHttpRequest .

Przykład: mój skrypt serwera odczytuje plik zip (zajmuje to 5 sekund):

$filesize=filesize('test.zip');

header("Content-Length: " . $filesize); // set header length
// if the headers is not set then the evt.loaded will be 0
readfile('test.zip');
exit 0;

Teraz mogę monitorować proces pobierania skryptu serwera, ponieważ znam jego całkowitą długość:

function updateProgress(evt) 
{
   if (evt.lengthComputable) 
   {  // evt.loaded the bytes the browser received
      // evt.total the total bytes set by the header
      // jQuery UI progress bar to show the progress on screen
     var percentComplete = (evt.loaded / evt.total) * 100;  
     $('#progressbar').progressbar( "option", "value", percentComplete );
   } 
}   
function sendreq(evt) 
{  
    var req = new XMLHttpRequest(); 
    $('#progressbar').progressbar();    
    req.onprogress = updateProgress;
    req.open('GET', 'test.php', true);  
    req.onreadystatechange = function (aEvt) {  
        if (req.readyState == 4) 
        {  
             //run any callback here
        }  
    };  
    req.send(); 
}

Firefox obsługuje zdarzenia postępu pobierania XHR .

Wydaje się, że jednym z najbardziej obiecujących podejść jest otwarcie drugiego kanału komunikacyjnego z powrotem do serwera, aby zapytać go, jaka część transferu została zakończona.

Firefox 3.5 będzie obsługiwał zdarzenie postępu przesyłania

Wydaje się, że nie ma sposobu, aby sobie z tym poradzić, ale jest coś podobnego do tego, co chcesz pobrać. Gdy readyState ma wartość 3, możesz okresowo wysyłać zapytania responseText, aby pobrać całą pobraną zawartość jako ciąg znaków (to nie działa w IE), aż do momentu, gdy wszystko będzie dostępne, w którym to momencie przejdzie do readyState 4. Łącznie bajty pobrane w dowolnym momencie będą równe sumie bajtów w ciągu przechowywanym w responseText.

W przypadku podejścia typu wszystko albo nic do pytania wysyłania, ponieważ musisz przekazać ciąg do przesłania (i można określić całkowitą liczbę bajtów), całkowita liczba bajtów wysłanych dla readyState 0 i 1 będzie równa 0, a suma dla readyState 2 będzie całkowitą liczbą bajtów w przekazanym ciągu. Suma bajtów zarówno wysłanych, jak i odebranych w readyState 3 i 4 będzie sumą bajtów w oryginalnym ciągu plus łączna liczba bajtów w responseText.

Jeśli masz dostęp do swojej instalacji Apache i ufasz kodowi innej firmy, możesz użyć modułu postępu przesyłania apache (jeśli używasz apache; istnieje również moduł postępu przesyłania Nginx ).

W przeciwnym razie musiałbyś napisać skrypt, który możesz trafić poza pasmo, aby zażądać statusu pliku (na przykład sprawdzając rozmiar pliku tmp).

Wydaje mi się, że w przeglądarce Firefox 3 trwają prace nad dodaniem obsługi postępu przesyłania do przeglądarki, ale to nie dotrze do wszystkich przeglądarek i przez jakiś czas zostanie powszechnie przyjęte (a szkoda).

Jedynym sposobem na to w czystym javascript jest zaimplementowanie pewnego rodzaju mechanizmu odpytywania. Będziesz musiał wysyłać żądania Ajax w stałych odstępach czasu (na przykład co 5 sekund), aby uzyskać liczbę bajtów odebranych przez serwer.

Bardziej wydajnym sposobem byłoby użycie lampy błyskowej. Składnik Flex FileReference okresowo wysyła zdarzenie „progress” zawierające liczbę przesłanych już bajtów. Jeśli chcesz trzymać się javascript, dostępne są pomosty między skryptami akcji i javascript. Dobra wiadomość jest taka, że ​​ta praca została już wykonana dla Ciebie :)

swfupload

Ta biblioteka umożliwia zarejestrowanie modułu obsługi javascript na zdarzenie postępu flash.

To rozwiązanie ma ogromną zaletę polegającą na tym, że nie wymaga dodatkowych zasobów po stronie serwera.