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

Question

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

122

Возможно ли получить прогресс XMLHttpRequest (загруженные байты, загруженные байты)?

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

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

albanx 16 сен. 2008, в 21:22

Источник

Теги:

javascript

ajax

progress-bar

8 ответов

Ещё вопросы

albanx · Answer 1 · 2010-09-12T11-32-00.000Z

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

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

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

Для перехода к https://developer.mozilla.org/en/Using_XMLHttpRequest.

Пример: Мой сервер script читает 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;

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

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(); 
}

Стоит отметить, что «Content-Length» - это не приблизительная длина, это должна быть точная длина, слишком короткая, и браузер прервет загрузку, слишком долго, и браузер предположит, что загрузка не была завершена.
да, верно, оценка не так, просто путаница
@ChrisChilvers Это означает, что файл PHP может быть рассчитан неправильно, верно?
@nicematt в этом примере было бы хорошо, если бы он исходил из файла, но если бы вы передавали zip-файл прямо из памяти, вы не могли бы просто определить длину содержимого или оценить его.
@TheProHands Когда вы заходите на страницу .php, сервер запускает файл PHP и отправляет вам свой вывод . Сервер должен посылать длину вывода, а не файл .php.
Может кто-нибудь объяснить, что такое строка "$ ('# progressbar'). Progressbar (" option "," value ",centComplete);" средства? Это вызывает конкретный плагин? Как это работает? Пожалуйста, сделайте ответ понятным для новых пользователей.
@Zac Это просто индикатор прогресса jQueryUi, который показывает прогресс в пользовательском интерфейсе от 0% до 100%.
@albanx Спасибо. Можете ли вы указать, какие CSS-файлы импортировать для использования этого прогресбара? Спасибо

Sean McMains · Answer 2 · 2008-09-16T22-42-00.000Z

Здесь приятно обсуждать индикатор прогресса для шаблона AJAX:

http://ajaxpatterns.org/Progress_Indicator

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

Я думаю, что ссылка может быть мертвой

Markus Peröbner · Answer 3 · 2010-07-29T10-13-00.000Z

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

Maciej Łebkowski · Answer 4 · 2009-05-21T10-56-00.000Z

Firefox 3.5 будет поддерживать событие для достижения прогресса

Orclev · Answer 5 · 2008-09-16T21-24-00.000Z

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

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

Forums Lover · Answer 6 · 2016-01-29T10-21-00.000Z

<!DOCTYPE html>
<html>
<body>
<p id="demo">result</p>
<button type="button" onclick="get_post_ajax();">Change Content</button>
<script type="text/javascript">
	function update_progress(e)
	{
	  if (e.lengthComputable)
	  {
	    var percentage = Math.round((e.loaded/e.total)*100);
	    console.log("percent " + percentage + '%' );
	  }
	  else 
	  {
	  	console.log("Unable to compute progress information since the total size is unknown");
	  }
	}
	function transfer_complete(e){console.log("The transfer is complete.");}
	function transfer_failed(e){console.log("An error occurred while transferring the file.");}
	function transfer_canceled(e){console.log("The transfer has been canceled by the user.");}
	function get_post_ajax()
	{
	  	var xhttp;
	  	if (window.XMLHttpRequest){xhttp = new XMLHttpRequest();}//code for modern browsers} 
	 	else{xhttp = new ActiveXObject("Microsoft.XMLHTTP");}// code for IE6, IE5	  	
	  	xhttp.onprogress = update_progress;
		xhttp.addEventListener("load", transfer_complete, false);
		xhttp.addEventListener("error", transfer_failed, false);
		xhttp.addEventListener("abort", transfer_canceled, false);	  	
	  	xhttp.onreadystatechange = function()
	  	{
	    	if (xhttp.readyState == 4 && xhttp.status == 200)
	    	{
	      		document.getElementById("demo").innerHTML = xhttp.responseText;
	    	}
	  	};
	  xhttp.open("GET", "http://it-tu.com/ajax_test.php", true);
	  xhttp.send();
	}
</script>
</body>
</html>

Aeon · Answer 7 · 2008-09-16T21-20-00.000Z

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

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

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

Alexandre Victoor · Answer 8 · 2008-09-16T22-24-00.000Z

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

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

swfupload

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

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