JavaScript、HTML、Fetch API を使用してアップロードの進行状況インジケーターを作成するその他の方法
2024-07-27
JavaScript、HTML、Fetch API を使用したアップロード進捗インジケーターの作成
このチュートリアルでは、JavaScript、HTML、Fetch APIを使用して、Webページでファイルアップロードの進行状況を示すインジケーターを作成する方法を説明します。
仕組み
- HTMLで
<input type="file">要素を使用して、ユーザーがファイルをアップロードできるようにします。 fetch()APIを使用して、ファイルをサーバーにアップロードします。onprogressイベントを使用して、アップロードの進行状況を追跡します。- JavaScriptを使用して、アップロードの進捗状況を視覚的に表示するインジケーター (プログレスバーなど) を更新します。
例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ファイルアップロード進捗インジケーター</title>
</head>
<body>
<h1>ファイルアップロード</h1>
<input type="file" id="fileInput">
<div id="progress"></div>
<script>
const fileInput = document.getElementById('fileInput');
const progress = document.getElementById('progress');
fileInput.addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
const formData = new FormData();
formData.append('file', file);
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
})
.onprogress(event => {
const percentComplete = (event.loaded / event.total) * 100;
progress.textContent = `アップロード中: ${percentComplete}%`;
});
}
});
</script>
</body>
</html>
説明
- このHTMLコードは、ファイル入力フィールドとアップロードの進行状況を表示する領域 (
<div>) を定義します。 - JavaScriptコードは、ファイル入力フィールドの
changeイベントリスナーを定義します。 - イベントリスナーは、選択されたファイルを取得し、
FormDataオブジェクトを作成します。 fetch()APIを使用して、POSTリクエストで/uploadエンドポイントにファイルをアップロードします。onprogressイベントリスナーは、アップロードの進行状況を追跡し、progress要素のテキストコンテンツを更新します。
- この例では、シンプルなプログレスバーを使用していますが、より複雑なインジケーターを作成することもできます。
- エラー処理と応答ハンドリングを追加する必要があります。
- 大規模なファイルをアップロードする場合は、
XMLHttpRequestAPI を使用する方が効率的な場合があります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ファイルアップロード進捗インジケーター</title>
</head>
<body>
<h1>ファイルアップロード</h1>
<input type="file" id="fileInput">
<div id="progress"></div>
<script src="script.js"></script>
</body>
</html>
JavaScript (script.js)
const fileInput = document.getElementById('fileInput');
const progress = document.getElementById('progress');
fileInput.addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
const formData = new FormData();
formData.append('file', file);
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
})
.onprogress(event => {
const percentComplete = (event.loaded / event.total) * 100;
progress.textContent = `アップロード中: ${percentComplete}%`;
});
}
});
サーバーサイドコード (例: Python)
from flask import Flask, request, jsonify
import os
app = Flask(__name__)
@app.route('/upload', methods=['POST'])
def upload_file():
if request.method == 'POST':
# ファイルの取得
uploaded_file = request.files['file']
if uploaded_file:
# ファイル名の保存
filename = uploaded_file.filename
# ファイルの保存
uploaded_file.save(os.path.join('uploads', filename))
# レスポンスを返す
return jsonify({
'message': 'ファイルがアップロードされました。',
'filename': filename
})
else:
return jsonify({
'error': 'ファイルが選択されていません。'
})
if __name__ == '__main__':
app.run(debug=True)
HTML
<input type="file" id="fileInput">: ファイル入力フィールドを定義します。<div id="progress"></div>: アップロードの進行状況を表示する領域を定義します。
JavaScript
fileInput.addEventListener('change', function(e) {...}): ファイル入力フィールドでファイルが選択されたときに実行されるイベントリスナーを定義します。const file = e.target.files[0];: 選択されたファイルを取得します。const formData = new FormData();: フォームデータオブジェクトを作成します。formData.append('file', file);: フォームデータオブジェクトにファイルを格納します。fetch('/upload', { method: 'POST', body: formData }):/uploadエンドポイントにPOSTリクエストを送信します。.then(response => response.json()): レスポンスをJSON形式で解析します。.then(data => { console.log(data); }): レスポンスデータを出力します。.catch(error => { console.error(error); }): エラーが発生した場合に処理します。.onprogress(event => {...}): アップロードの進行状況が更新されたときに実行されるイベントリスナーを定義します。const percentComplete = (event.loaded / event.total) * 100;: アップロードの完了率を計算します。progress.textContent =アップロード中: ${percentComplete}%;: アップロードの完了率をprogress要素のテキストコンテンツに設定します。
from flask import Flask, request, jsonify, os: Flaskフレームワーク、requestオブジェクト、jsonify関数、osモジュールをインポートします。app = Flask(__name__): Flaskアプリケーションを作成します。- `@app.route('/upload', methods=['POST
HTMLとJavaScriptを使用して、プログレスバーの要素を作成し、CSSを使用してスタイルを設定することができます。この方法は比較的シンプルで、高度なカスタマイズが可能です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ファイルアップロード進捗インジケーター</title>
<style>
#progress {
width: 300px;
height: 20px;
background-color: #ccc;
border: 1px solid #ddd;
position: relative;
}
#progressBar {
width: 0%;
height: 100%;
background-color: #007bff;
transition: width 0.3s ease;
}
</style>
</head>
<body>
<h1>ファイルアップロード</h1>
<input type="file" id="fileInput">
<div id="progress">
<div id="progressBar"></div>
</div>
<script src="script.js"></script>
</body>
</html>
const fileInput = document.getElementById('fileInput');
const progressBar = document.getElementById('progressBar');
fileInput.addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
const formData = new FormData();
formData.append('file', file);
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
})
.onprogress(event => {
const percentComplete = (event.loaded / event.total) * 100;
progressBar.style.width = `${percentComplete}%`;
});
}
});
ライブラリを使用する
アップロードの進行状況インジケーターを作成するためのライブラリがいくつかあります。これらのライブラリを使用すると、開発時間を短縮し、より洗練されたインジケーターを作成することができます。
アニメーションを使用する
CSSアニメーションを使用して、より魅力的なアップロードの進行状況インジケーターを作成することができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ファイルアップロード進捗インジケーター</title>
<style>
#progress {
width: 300px;
height: 20px;
background-color: #ccc;
border: 1px solid #ddd;
position: relative;
}
#progressBar {
width: 0%;
height: 100%;
background-color: #007bff;
animation: progress-bar-anim 3s linear infinite;
}
@keyframes progress-bar-anim {
0% {
width: 0%;
}
50% {
width: 50%;
}
100% {
width: 100%;
}
}
</style>
</head>
<body>
<h1>ファイルアップロード</h1>
<input type="file" id="fileInput">
<div id="progress">
<div id="progressBar"></div>
</div>
<script src="script.js"></script>
</body>
javascript html fetch-api
