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

Можно ли получить ход выполнения запроса XMLHttpRequest (загружено байт, загружено байт)?

Это было бы полезно, чтобы показать индикатор выполнения, когда пользователь загружает большой файл. Стандартный API, похоже, не поддерживает его, но, может быть, есть какое-то нестандартное расширение в любом из браузеров? В конце концов, это довольно очевидная возможность, поскольку клиент знает, сколько байт было загружено / загружено.

примечание: я знаю об альтернативе «опросить сервер о прогрессе» (это то, что я делаю сейчас). основная проблема с этим (кроме сложного кода на стороне сервера) заключается в том, что, как правило, при загрузке большого файла подключение пользователя полностью скрывается, поскольку большинство интернет-провайдеров предлагают плохой восходящий поток. Таким образом, дополнительные запросы не так оперативны, как я надеялся. Я надеялся, что найдется способ (возможно, нестандартный) получить эту информацию, которую браузер всегда имеет.

Для загруженных байтов это довольно просто. Просто следите за 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 .

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

Firefox 3.5 будет поддерживать событие загрузки.

Для всего загруженного, похоже, нет способа справиться с этим, но есть нечто похожее на то, что вы хотите загрузить. Как только значение 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 секунд), чтобы получить количество байтов, полученных сервером.

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

SWFUpload

Эта библиотека позволяет зарегистрировать обработчик javascript в событии прогресса флэш-памяти.

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