今回は XMLHttpRequestを使ってファイルをサーバにアップロードする際に、その進捗状況を把握したい場合のコードを書いてみる。
コードは当然 JavaScript である。以下に HTMLと合わせたコードを示す。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ファイルアップロードの進捗状況</title>
<style>
#progress-bar {
width: 100%;
background-color: #f3f3f3;
position: relative;
}
#progress-bar span {
position: absolute;
height: 100%;
background-color: #4CAF50;
}
</style>
</head>
<body>
<input type="file" id="file-input">
<div id="progress-bar"><span></span></div>
<script>
document.getElementById('file-input').addEventListener('change', function (event) {
const file = event.target.files[0];
const xhr = new XMLHttpRequest();
const formData = new FormData();
xhr.open('POST', '/upload', true);
xhr.upload.addEventListener('progress', function (event) {
if (event.lengthComputable) {
const percentage = (event.loaded / event.total) * 100;
document.getElementById('progress-bar').querySelector('span').style.width = percentage + '%';
}
});
xhr.onreadystatechange = function () {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
alert('ファイルのアップロードに成功しました。');
} else {
alert('ファイルのアップロードに失敗しました。');
}
}
};
formData.append('file', file);
xhr.send(formData);
});
</script>
</body>
</html>
input type="file" 要素と、進捗状況を表示する div 要素を配置し、CSS で調整しておく。
input 要素が change されたタイミングで XMLHttpRequest を使ってサーバにPOSTする。
リクエストの進捗状況を表示するには、xhr.upload オブジェクトの progress イベントを使う。
event.loadedとevent.totalプロパティを使って、アップロードの進捗率（進捗率）を計算し、その値を使って進捗バーの幅を更新している。
最後に、xhr.onreadystatechangeでリクエストの状態を監視し、リクエストが完了したら（readyState === XMLHttpRequest.DONE）、ステータスコードが200の場合はアップロード成功、それ以外の場合はアップロード失敗として単純にアラートで通知している。
実際のプロジェクトでは、エラー処理やファイル制限等が必要となるため、このようなサンプルと同じようにはいかないだろうが、進捗管理の要点は十分に理解できると思う。
0 件のコメント:
コメントを投稿