XMLHttpRequestUpload

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

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

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

Интерфейс XMLHttpRequestUpload представляет процесс загрузки для определённого XMLHttpRequest. Это непрозрачный объект, представляющий процесс загрузки, зависящий от браузера. Он является XMLHttpRequestEventTarget и может быть получен путём вызова XMLHttpRequest.upload.

Свойства экземпляра

У этого интерфейса нет специфических свойств, но он наследует свойства XMLHttpRequestEventTarget и EventTarget.

Методы экземпляра

У этого интерфейса нет специфических методов, но он наследует методы XMLHttpRequestEventTarget и EventTarget.

События

abort: Срабатывает, когда запрос был прерван, например, потому что программа вызвала XMLHttpRequest.abort(). Также доступно через свойство обработчика событий onabort.
error: Срабатывает, когда запрос столкнулся с ошибкой. Также доступно через свойство обработчика событий onerror.
load: Срабатывает, когда транзакция запроса завершается успешно. Также доступно через свойство обработчика событий onload.
loadend: Срабатывает, когда запрос завершен, будь то успешно (после load) или неуспешно (после abort или error). Также доступно через свойство обработчика событий onloadend.
loadstart: Срабатывает, когда запрос начал загружать данные. Также доступно через свойство обработчика событий onloadstart.
progress: Периодически срабатывает, когда запрос получает больше данных. Также доступно через свойство обработчика событий onprogress.
timeout: Срабатывает, когда загрузка прерывается из-за истечения установленного времени. Также доступно через свойство обработчика событий ontimeout.

Примеры

Загрузка файла с таймаутом

Это позволяет загружать файл на сервер; он отображает полосу прогресса во время загрузки, а также сообщение с прогрессом и результатами (успех или неудача). Кнопка отмены позволяет остановить загрузку.

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>XMLHttpRequestUpload test</title>
    <link rel="stylesheet" href="xhrupload_test.css" />
    <script src="xhrupload_test.js"></script>
  </head>
  <body>
    <main>
      <h1>Upload a file</h1>
      <p>
        <label for="file">File to upload</label><input type="file" id="file" />
      </p>
      <p>
        <progress />
      </p>
      <p>
        <output></output>
      </p>
      <p>
        <button disabled id="abort">Abort</button>
      </p>
    </main>
  </body>
</html>

CSS

body {
  background-color: lightblue;
}

main {
  margin: 50px auto;
  text-align: center;
}

#file {
  display: none;
}

label[for="file"] {
  background-color: lightgrey;
  padding: 10px 10px;
}

progress {
  display: none;
}

progress.visible {
  display: inline;
}

JavaScript

addEventListener("DOMContentLoaded", () => {
  const fileInput = document.getElementById("file");
  const progressBar = document.querySelector("progress");
  const log = document.querySelector("output");
  const abortButton = document.getElementById("abort");

  fileInput.addEventListener("change", () => {
    const xhr = new XMLHttpRequest();
    xhr.timeout = 2000; // 2 seconds

    // Link abort button
    abortButton.addEventListener(
      "click",
      () => {
        xhr.abort();
      },
      { once: true },
    );

    // When the upload starts, we display the progress bar
    xhr.upload.addEventListener("loadstart", (event) => {
      progressBar.classList.add("visible");
      progressBar.value = 0;
      progressBar.max = event.total;
      log.textContent = "Uploading (0%)…";
      abortButton.disabled = false;
    });

    // Each time a progress event is received, we update the bar
    xhr.upload.addEventListener("progress", (event) => {
      progressBar.value = event.loaded;
      log.textContent = `Uploading (${(
        (event.loaded / event.total) *
        100
      ).toFixed(2)}%)…`;
    });

    // When the upload is finished, we hide the progress bar.
    xhr.upload.addEventListener("loadend", (event) => {
      progressBar.classList.remove("visible");
      if (event.loaded !== 0) {
        log.textContent = "Upload finished.";
      }
      abortButton.disabled = true;
    });

    // In case of an error, an abort, or a timeout, we hide the progress bar
    // Note that these events can be listened to on the xhr object too
    function errorAction(event) {
      progressBar.classList.remove("visible");
      log.textContent = `Upload failed: ${event.type}`;
    }
    xhr.upload.addEventListener("error", errorAction);
    xhr.upload.addEventListener("abort", errorAction);
    xhr.upload.addEventListener("timeout", errorAction);

    // Build the payload
    const fileData = new FormData();
    fileData.append("file", fileInput.files[0]);

    // Theoretically, event listeners could be set after the open() call
    // but browsers are buggy here
    xhr.open("POST", "upload_test.php", true);

    // Note that the event listener must be set before sending (as it is a preflighted request)
    xhr.send(fileData);
  });
});

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

Спецификация
XMLHttpRequest # xmlhttprequestupload

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

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`XMLHttpRequestUpload`	2	12	3.5	≤12.1	4	18	4	≤12.1	3	1.0	≤37
`abort_event`	2	12	3.5	≤12.1	4	18	4	≤12.1	3	1.0	≤37
`error_event`	2	12	3.5	≤12.1	4	18	4	≤12.1	3	1.0	≤37
`load_event`	2	12	3.5	≤12.1	4	18	4	≤12.1	3	1.0	≤37
`loadend_event`	18	12	5	≤12.1	4	18	5	≤12.1	3	1.0	4.4
`loadstart_event`	2	12	3.5	≤12.1	4	18	4	≤12.1	3	1.0	4.4
`progress_event`	2	12	3.5	≤12.1	4	18	4	≤12.1	3	1.0	≤37
`timeout_event`	29	12	12	16	7	29	14	16	7	1.0	4.4

См. также

XMLHttpRequest

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