FileReader: событие loadend

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

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

Примечание: Эта функция доступна в Веб-воркерах.

Событие loadend интерфейса FileReader срабатывает при завершении чтения файла, успешно или нет.

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

Синтаксис

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

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

onloadend = (event) => {};

Тип события

A 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-loadend-event
File API # dfn-onloadend

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

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

См. также

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