XMLHttpRequestUpload: событие progress

Событие progress периодически срабатывает, когда запрос получает больше данных.

Используйте имя события в методах, таких как addEventListener(), или установите свойство обработчика события.

addEventListener("progress", (event) => {});

onprogress = (event) => {};

Объект ProgressEvent. Наследуется от Event.

Помимо перечисленных ниже свойств, доступны свойства из родительского интерфейса Event.

lengthComputable Только для чтения

Логическое значение, указывающее, можно ли вычислить общий объём работы и объём выполненной работы основным процессом. Другими словами, показывает, можно ли измерить прогресс.

loaded Только для чтения

Значение целочисленного беззнакового 64-битного числа, указывающее объём работы, уже выполненный основным процессом. Соотношение проделанной работы можно вычислить, разделив total на значение этого свойства. При загрузке ресурса с помощью HTTP учитывается только тело HTTP-сообщения, а не заголовки и другие накладные расходы.

total Только для чтения

Целочисленное беззнаковое 64-битное число, представляющее общий объём работы, выполняемой основным процессом. При загрузке ресурса с помощью HTTP, это значение равно Content-Length (размер тела сообщения), не включая заголовки и другие накладные расходы.

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

// Each time a progress event is received we update the progress bar
// and the progress message
xhr.upload.addEventListener("progress", (event) => {
  progressBar.value = event.loaded; // Update the progress bar
  log.textContent = `Uploading (${((event.loaded / event.total) * 100).toFixed(
    2,
  )}%)…`;
});

• Связанные события: loadstart, load, error, loadend, timeout, abort
• Мониторинг прогресса
• XMLHttpRequestUpload