FileReader: событие loadstart

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

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

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

Событие loadstart интерфейса FileReader срабатывает, когда началась операция чтения файла.

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

Синтаксис

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

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

onloadstart = (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-loadstart-event
File API # dfn-onloadstart

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`loadstart_event`	6	12	79 3.6–79 `loadstart` событие отправляется синхронно (должно быть асинхронным, согласно спецификации).	11	6	18	79 32–79 `loadstart` событие отправляется синхронно (должно быть асинхронным, согласно спецификации).	11	6	1.0	3

См. также

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