FileReader: событие progress

Базовая поддержка Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с января 2020 года.

Примечание: Эта функция доступна в Web Workers.

Событие progress интерфейса FileReader периодически срабатывает по мере того, как FileReader считывает данные.

Это событие не отменяется и не распространяется.

Синтаксис

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

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

onprogress = (event) => {};

Тип события

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

Свойства события

Также наследует свойства от своего родительского класса Event.

ProgressEvent.lengthComputable Только для чтения: Флаг булевого типа, указывающий, можно ли вычислить общее количество операций, которые нужно выполнить, и количество уже выполненных операций в процессе. Другими словами, он показывает, можно ли измерить прогресс.
ProgressEvent.loaded Только для чтения: Значение целого неотрицательного 64-битного числа, указывающее количество операций, уже выполненных в процессе. Соотношение выполненной работы можно рассчитать, разделив значение этого свойства на total. При скачивании ресурса с помощью HTTP учитывается только тело HTTP-сообщения, а не заголовки и другие накладные расходы.
ProgressEvent.total Только для чтения: Целое неотрицательное 64-битное число, представляющее общее количество операций, которые выполняет процесс. При скачивании ресурса с помощью HTTP это Content-Length (размер тела сообщения), не включая заголовки и другие накладные расходы.

Примеры

Пример

HTML

<div class="example">
  <div class="file-select">
    <label for="avatar">Choose a profile picture:</label>
    <input
      type="file"
      id="avatar"
      name="avatar"
      accept="image/png, image/jpeg" />
  </div>

  <img src="" class="preview" height="200" alt="Image preview" />

  <div class="event-log">
    <label for="eventLog">Event log:</label>
    <textarea readonly class="event-log-contents" id="eventLog"></textarea>
  </div>
</div>

JavaScript

const fileInput = document.querySelector('input[type="file"]');
const preview = document.querySelector("img.preview");
const eventLog = document.querySelector(".event-log-contents");
const reader = new FileReader();

function handleEvent(event) {
  eventLog.textContent += `${event.type}: ${event.loaded} bytes transferred\n`;

  if (event.type === "load") {
    preview.src = reader.result;
  }
}

function addListeners(reader) {
  reader.addEventListener("loadstart", handleEvent);
  reader.addEventListener("load", handleEvent);
  reader.addEventListener("loadend", handleEvent);
  reader.addEventListener("progress", handleEvent);
  reader.addEventListener("error", handleEvent);
  reader.addEventListener("abort", handleEvent);
}

function handleSelected(e) {
  eventLog.textContent = "";
  const selectedFile = fileInput.files[0];
  if (selectedFile) {
    addListeners(reader);
    reader.readAsDataURL(selectedFile);
  }
}

fileInput.addEventListener("change", handleSelected);

Результат

Спецификации

Спецификация
File API # dfn-progress-event
File API # dfn-onprogress

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`progress_event`	6	12	3.6	11	6	18	32	11	6	1.0	3

См. также

Связанные события: loadstart, loadend, load, error, abort

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/FileReader/progress_event