XMLHttpRequestEventTarget: progress イベント

addEventListener("progress", (event) => { }) onprogress = (event) => { }

<div class="controls"> <input class="xhr success" type="button" name="xhr" value="クリックで XHR 開始（成功）" /> <input class="xhr error" type="button" name="xhr" value="クリックで XHR 開始（エラー）" /> <input class="xhr abort" type="button" name="xhr" value="クリックで XHR 開始（中止）" /> </div> <textarea readonly class="event-log"></textarea>

.event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: 0.5rem; padding: 0.2rem; } input { width: 13rem; margin: 0.5rem; }

const xhrButtonSuccess = document.querySelector(".xhr.success"); const xhrButtonError = document.querySelector(".xhr.error"); const xhrButtonAbort = document.querySelector(".xhr.abort"); const log = document.querySelector(".event-log"); function handleEvent(e) { log.textContent = `${log.textContent}${e.type}: ${e.loaded} bytes transferred\n`; } function addListeners(xhr) { xhr.addEventListener("loadstart", handleEvent); xhr.addEventListener("load", handleEvent); xhr.addEventListener("loadend", handleEvent); xhr.addEventListener("progress", handleEvent); xhr.addEventListener("error", handleEvent); xhr.addEventListener("abort", handleEvent); } function runXHR(url) { log.textContent = ""; const xhr = new XMLHttpRequest(); addListeners(xhr); xhr.open("GET", url); xhr.send(); return xhr; } xhrButtonSuccess.addEventListener("click", () => { runXHR( "https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json", ); }); xhrButtonError.addEventListener("click", () => { runXHR("http://i-dont-exist"); }); xhrButtonAbort.addEventListener("click", () => { runXHR( "https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json", ).abort(); });

// progress イベントを受信するたびに、進捗バーと進捗メッセージを更新 xhr.upload.addEventListener("progress", (event) => { progressBar.value = event.loaded; // 進捗バーを更新 log.textContent = `アップロード中 (${((event.loaded / event.total) * 100).toFixed( 2, )}%)…`; });