こんにちは！今日は、JavaScriptで進行状況を表示してファイルをダウンロードするためのシンプルで便利なシステムを作成するのをお手伝いします。この機能は、ユーザーが大きなファイルをダウンロードする必要があり、プロセスの進行状況を確認することが重要な場合に役立ちます。
このプロセスをステップごとに見ていきましょう。各ステップの詳細な説明をご覧ください。
ステップ1。ファイルをアップロードするためのHTMLフォームを作成する
まず、ユーザーがダウンロードするファイルを選択できるフォームを作成する必要があります。HTMLでは、fileタイプの<input>要素を使用してこれを行います。
HTML テンプレート:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Upload with Progress</title>
</head>
<body>
<h1>Загрузка файла с прогрессом</h1>
<form id="uploadForm">
<input type="file" id="fileInput" name="file" />
<button type="submit">Загрузить файл</button>
</form>
<!-- Прогресс-бар -->
<progress id="progressBar" value="0" max="100" style="width: 100%;"></progress>
<!-- Результат -->
<div id="status"></div>
<script src="script.js"></script>
</body>
</html>
📋 説明:
<input type="file">要素を使用すると、ユーザーはダウンロードするファイルを選択できます。プログレスバー
<progress>は、ファイルのダウンロードの進捗状況をパーセントで表示します。<div id="status">要素は、ダウンロードのステータス（成功またはエラー）に関するメッセージを表示するために使用されます。
ステップ2. フォームイベントハンドラーの追加
ユーザーがファイルを選択して[ダウンロード]ボタンをクリックすると、このイベントをキャプチャしてファイルをサーバーに送信する必要があります。これを行うには、フォームハンドラを追加し、その標準動作（ページの再読み込み）をキャンセルします。
script.jsにハンドラを追加します。
document.getElementById('uploadForm').addEventListener('submit', function (event) {
event.preventDefault(); // 標準のフォーム動作をキャンセルする
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
if (file) {
uploadFile(file); // ファイルを関数に渡してダウンロードします
} else {
alert('Please select a file.');
}
});
🛑 ここで何が起こっているのか:
フォームでイベント
submitを聞いています。フォーム送信の標準動作をキャンセルします。
ユーザーがファイルを選択したかどうかを確認し、選択した場合は、ファイルをダウンロードするための関数
uploadFile()を呼び出します。
ステップ3. XMLHttpRequestを使用したファイルのダウンロードを設定する
それでは、進行状況を追跡しながらサーバーにファイルをアップロードするという主要な部分に移りましょう。そのために、ファイルを送信し、ダウンロードの進行状況に関する情報を受け取ることができるオブジェクトXMLHttpRequestを使用します。
関数の実装 uploadFile:
function uploadFile(file) {
const xhr = new XMLHttpRequest(); // 新しい XMLHttpRequest を作成します
const formData = new FormData(); // FormData を使用してファイルを送信する
formData.append('file', file); // FormDataオブジェクトにファイルを追加します
// 読み込みの進行状況を追跡するためのハンドラー
xhr.upload.addEventListener('progress', function (event) {
if (event.lengthComputable) {
const percentComplete = (event.loaded / event.total) * 100;
document.getElementById('progressBar').value = percentComplete; // 進捗バーを更新しています
}
});
// 読み込みが成功した場合のハンドラー
xhr.addEventListener('load', function () {
if (xhr.status === 200) {
document.getElementById('status').textContent = 'File uploaded successfully!';
} else {
document.getElementById('status').textContent = 'Error loading file.';
}
});
// エラーハンドラ
xhr.addEventListener('error', function () {
document.getElementById('status').textContent = 'An error occurred while uploading the file.';
});
xhr.open('POST', '/upload'); // ファイルを送信するためのメソッドとURLを指定します
xhr.send(formData); // データを送信しています
}
📦 作業の分析:
作成
XMLHttpRequest:このオブジェクトは、HTTPリクエストの送信を担当します。FormData: サーバーに送信されるファイルのデータをパッケージ化するためにFormDataを使用します。進捗状況の追跡：イベント
progressを使用して、サーバーにアップロードされたバイト数を追跡し、進捗バーを更新します。ダウンロード完了処理:読み込みが成功した場合（ステータス
200）、読み込み成功のメッセージを表示し、それ以外の場合はエラーメッセージを表示します。エラー処理：読み込み中のエラーを追跡し、失敗した場合にユーザーに通知します。
ステップ4. ファイルを処理するためのサーバーの設定
プロジェクトを完了するには、ファイルを受け入れるサーバーを設定する必要があります。例として、ダウンロードしたファイルの処理に役立つライブラリ express とパッケージ multer を使用した Node.js サーバーを使用できます。
Node.jsサーバーの例：
const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();
const upload = multer({ dest: 'uploads/' }); // ファイルをダウンロードするフォルダを指定します
// ファイルのダウンロードルート
app.post('/upload', upload.single('file'), (req, res) => {
if (!req.file) {
return res.status(400).send('File was not uploaded.');
}
res.send('File uploaded successfully!');
});
app.listen(3000, () => {
console.log('Server running on port 3000');
});
🌍 説明:
ダウンロードしたファイルを処理するために、
multerライブラリを使用します。サーバーはファイルを受け取り、指定されたフォルダ（
uploads/）にアップロードし、クライアントに応答を返します。
ステップ5。テスト
クライアント側とサーバー側の両方を設定したので、ファイルのダウンロードをテストできます。サーバーを起動し、ダウンロードフォームのページを開き、ファイルを選択すると、ファイルがダウンロードされるにつれてプログレスバーが埋まっていくのがわかります。
結論
プログレスバーを使用してファイルをダウンロードすることは、特に大きなファイルを扱う場合に、ユーザーエクスペリエンスを向上させるための優れた方法です。ユーザーはプロセスの進行状況を確認できるため、アプリケーションとのやり取りがよりわかりやすく、透明性が高まります。
ご不明な点がある場合や、複数のファイルのサポートや残り時間の表示などの追加機能を追加したい場合は、お知らせください！ 👨💻