FileReader: событие abort

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

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

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

Событие abort интерфейса FileReader срабатывает, когда чтение было прервано, например, потому что программа вызвала FileReader.abort().

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

Синтаксис

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

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

onabort = (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);
  }
  reader.abort();
}

fileInput.addEventListener("change", handleSelected);

Результат

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

Спецификация
File API # dfn-abort-event
File API # dfn-onabort

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

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

См. также

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

© 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/abort_event