FileReader: событие load

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

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

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

Событие load интерфейса FileReader срабатывает, когда файл успешно прочитан.

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

Синтаксис

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

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

onload = (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-load-event
File API # dfn-onload

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

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

См. также

Связанные события: loadstart, loadend, progress, 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/load_event