Как получить прогресс от XMLHttpRequest

Для загруженных байтов это довольно просто. Просто следите за событием xhr.upload.onprogress. Браузер знает размер файлов, которые он должен загрузить, и размер загружаемых данных, поэтому он может предоставить информацию о ходе выполнения.

Для загруженных байтов (при получении информации с помощью xhr.responseText) это немного сложнее, потому что браузер не знает, сколько байтов будет отправлено в запросе сервера. Единственное, что в этом случае знает браузер, - это размер получаемых байтов.

Для этого есть решение, достаточно установить заголовок Content-Length в сценарии сервера, чтобы получить общий размер байтов, которые браузер собирается получить.

Дополнительные сведения см. На странице https://developer.mozilla.org/en/Using_XMLHttpRequest.

Пример: мой серверный скрипт читает zip-файл (это занимает 5 секунд):

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

Теперь я могу отслеживать процесс загрузки серверного скрипта, потому что знаю его общую длину:

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 поддерживает события выполнения загрузки XHR.

ИЗМЕНИТЬ 2021-07-08 10:30 PDT

Ссылка выше мертва. При поиске на сайте Mozilla WebDev была обнаружена следующая ссылка:

https://developer.mozilla.org/en-US/docs/Web/API/ProgressEvent

В нем описывается, как использовать событие прогресса с XMLHttpRequest, и приводится пример. Я привел пример ниже:

var progressBar = document.getElementById("p"),
    client = new XMLHttpRequest()
client.open("GET", "magical-unicorns")
client.onprogress = function(pe) {
  if(pe.lengthComputable) {
    progressBar.max = pe.total
    progressBar.value = pe.loaded
  }
}
client.onloadend = function(pe) {
  progressBar.value = pe.loaded
}
client.send()

Я также нашел эту ссылку, на которую, я думаю, указывала исходная ссылка.

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/progress_event

Один из наиболее многообещающих подходов - это открытие второго канала связи с сервером, чтобы спросить его, какая часть передачи была завершена.

Для всего загруженного, похоже, нет способа справиться с этим, но есть что-то похожее на то, что вы хотите для загрузки. Когда для параметра readyState установлено значение 3, вы можете периодически запрашивать responseText, чтобы получить весь контент, загруженный в виде String (это не работает в IE), до тех пор, пока все это не станет доступным, после чего он перейдет в состояние readyState 4. Итого байты, загруженные в любой момент времени, будут равны общему количеству байтов в строке, хранящейся в responseText.

Для подхода «все или ничего» к вопросу о загрузке, поскольку вы должны передать строку для загрузки (и можно определить ее общее количество байтов), общее количество байтов, отправленных для readyState 0 и 1, будет равно 0, а общее количество для readyState 2 будет общим количеством байтов в строке, которую вы передали. Общее количество байтов, отправленных и полученных в readyState 3 и 4, будет суммой байтов в исходной строке плюс общее количество байтов в responseText.

Если у вас есть доступ к вашей установке apache и вы доверяете стороннему коду, вы можете использовать модуль прогресса загрузки apache (если вы используете apache; есть также модуль прогресса загрузки nginx).

В противном случае вам придется написать сценарий, который вы можете нажать вне диапазона, чтобы запросить статус файла (например, проверяя размер файла tmp).

В Firefox 3 ведется некоторая работа по добавлению поддержки процесса загрузки в браузер, но это не войдет во все браузеры и не получит широкого распространения в течение некоторого времени (жаль больше).

Единственный способ сделать это с помощью чистого javascript - реализовать какой-то механизм опроса. Вам нужно будет отправлять запросы ajax через фиксированные интервалы (например, каждые 5 секунд), чтобы получить количество байтов, полученных сервером.

Более эффективным способом было бы использовать вспышку. Компонент Flex FileReference периодически отправляет "прогресс" событие, содержащее количество уже загруженных байтов. Если вам нужно придерживаться javascript, существуют мосты между ActionScript и javascript. Хорошая новость в том, что эта работа уже сделана за вас :)

swfupload

Эта библиотека позволяет зарегистрировать обработчик javascript для события выполнения flash.

Это решение имеет существенное преимущество в том, что не требует дополнительных ресурсов на стороне сервера.