| CARVIEW |
Select Language
HTTP/2 200
x-guploader-uploadid: AAwnv3KTmwD6zYaTbJEszUxy1xEs0wCf6guF2Sqe4_-p1S9A_Z9ffpbVT5bi54vKSvHo4aZa
x-goog-generation: 1760058700888115
x-goog-metageneration: 1
x-goog-stored-content-encoding: identity
x-goog-stored-content-length: 159159
x-goog-meta-goog-reserved-file-mtime: 1760056722
x-goog-hash: crc32c=smGK2g==, md5=olUxJ/ppPAoQille6Zg6vQ==
x-goog-storage-class: STANDARD
accept-ranges: none
expires: Sat, 11 Oct 2025 21:14:17 GMT
cache-control: public, max-age=3600
last-modified: Fri, 10 Oct 2025 01:11:40 GMT
etag: W/"a2553127fa693c0a108a595ee9983abd"
content-type: text/html
age: 0
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000
alt-svc: clear
referrer-policy: strict-origin-when-cross-origin
x-content-type-options: nosniff
strict-transport-security: max-age=63072000
content-security-policy: default-src 'self'; script-src 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; script-src-elem 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; style-src 'report-sample' 'self' 'unsafe-inline'; object-src 'none'; base-uri 'self'; connect-src 'self' developer.allizom.org bcd.developer.allizom.org bcd.developer.mozilla.org updates.developer.allizom.org updates.developer.mozilla.org https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://incoming.telemetry.mozilla.org https://observatory-api.mdn.allizom.net https://observatory-api.mdn.mozilla.net https://api.github.com/search/issues stats.g.doubleclick.net https://api.stripe.com; font-src 'self'; frame-src 'self' interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net mdn.github.io live-samples.mdn.mozilla.net live-samples.mdn.allizom.net *.mdnplay.dev *.mdnyalp.dev *.play.test.mdn.allizom.net https://v2.scrimba.com https://scrimba.com jsfiddle.net www.youtube-nocookie.com codepen.io survey.alchemer.com https://js.stripe.com; img-src 'self' data: *.githubusercontent.com *.googleusercontent.com *.gravatar.com mozillausercontent.com firefoxusercontent.com profile.stage.mozaws.net profile.accounts.firefox.com developer.mozilla.org mdn.dev interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net wikipedia.org upload.wikimedia.org https://mdn.github.io/shared-assets/ https://mdn.dev/ https://*.google-analytics.com https://*.googletagmanager.com www.gstatic.com; manifest-src 'self'; media-src 'self' archive.org videos.cdn.mozilla.net https://mdn.github.io/shared-assets/; child-src 'self'; worker-src 'self';
x-frame-options: DENY
origin-trial: AxVILwizhbMjxFeHOn1P3R8niO1RJY/smaK4B4d1rLzc1gTaxtXMSaTi+FoigYgCw40uFRDwFcEAeqDR+vVLOW4AAABfeyJvcmlnaW4iOiJodHRwczovL2RldmVsb3Blci5tb3ppbGxhLm9yZyIsImZlYXR1cmUiOiJQcml2YXRlQXR0cmlidXRpb25WMiIsImV4cGlyeSI6MTc0MjA3OTYwMH0=
x-cloud-trace-context: 4921549875e1d7fa0b468d02b073be43
date: Sat, 11 Oct 2025 20:14:17 GMT
server: Google Frontend
via: 1.1 google
vary: Accept-Encoding
content-encoding: gzip
x-cache: miss
XMLHttpRequestUpload - Web API | MDN
Toggle sidebar
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
XMLHttpRequestUpload
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
XMLHttpRequestUpload インターフェイスは、特定のXMLHttpRequestのアップロード処理を表します。これは不透明オブジェクトで、基盤であるブラウザー依存のアップロード処理を表します。これはXMLHttpRequestEventTargetであり、XMLHttpRequest.uploadを呼び出すことで取得できます。
インスタンスプロパティ
このインターフェイスに固有のプロパティはありませんが、 XMLHttpRequestEventTarget および EventTarget から継承したプロパティがあります。
インスタンスメソッド
このインターフェイスに固有のメソッドはありませんが、 XMLHttpRequestEventTarget および EventTarget から継承したメソッドがあります。
イベント
このインターフェイスに固有のイベントはありませんが、 XMLHttpRequestEventTarget から継承したイベントがあります。
例
タイムアウト付きでファイルをアップロード
アップロード中は進捗バーが表示され、進捗状況や成功・失敗のメッセージが表示されます。中止ボタンでアップロードを中止できます。
HTML
html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>XMLHttpRequestUpload のテスト</title>
<link rel="stylesheet" href="xhrupload_test.css" />
<script src="xhrupload_test.js"></script>
</head>
<body>
<main>
<h1>ファイルのアップロード</h1>
<p>
<label for="file">アップロードするファイル</label>
<input type="file" id="file" />
</p>
<p>
<progress></progress>
</p>
<p>
<output></output>
</p>
<p>
<button disabled id="abort">中止</button>
</p>
</main>
</body>
</html>
CSS
css
body {
background-color: lightblue;
}
main {
margin: 50px auto;
text-align: center;
}
#file {
display: none;
}
label[for="file"] {
background-color: lightgrey;
padding: 10px;
}
progress {
display: none;
}
progress.visible {
display: inline;
}
JavaScript
js
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 秒
// リンク中止ボタン
abortButton.addEventListener(
"click",
() => {
xhr.abort();
},
{ once: true },
);
// アップロードを開始する時に、進捗バーを表示する
xhr.upload.addEventListener("loadstart", (event) => {
progressBar.classList.add("visible");
progressBar.value = 0;
progressBar.max = event.total;
log.textContent = "Uploading (0%)…";
abortButton.disabled = false;
});
// 進捗イベントを受信するたびに、バーを更新する
xhr.upload.addEventListener("progress", (event) => {
progressBar.value = event.loaded;
log.textContent = `Uploading (${(
(event.loaded / event.total) *
100
).toFixed(2)}%)…`;
});
// アップロードが完了したら、プログレスバーを非表示にする
xhr.upload.addEventListener("loadend", (event) => {
progressBar.classList.remove("visible");
if (event.loaded !== 0) {
log.textContent = "Upload finished.";
}
abortButton.disabled = true;
});
// エラー、中止、タイムアウトの場合、プログレスバーを非表示にする
// これらのイベントは xhr オブジェクトでも待ち受けすることができることに注意
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);
// 本体を構築
const fileData = new FormData();
fileData.append("file", fileInput.files[0]);
// 理論的には、 open() 呼び出しの後にイベントリスナーを設定することができますが、
// ブラウザーはこの部分にバグがありがち
xhr.open("POST", "upload_test.php", true);
// イベントリスナーは送信する前に設定しなければならないことに注意してください（プリフライトリクエストであるため）。
xhr.send(fileData);
});
});
仕様書
| Specification |
|---|
| XMLHttpRequest # xmlhttprequestupload |
ブラウザーの互換性
Loading…