JavaScriptでプログレスバー付きのファイルアップロード機能を実装するにはどうすればよいですか?-jsチュートリアル-php.cn

JavaScriptでプログレスバー付きのファイルアップロード機能を実装するにはどうすればよいですか?

WBOY

リリース： 2023-10-21 10:07:47

オリジナル

722 人が閲覧しました

JavaScript 如何实现带进度条的文件上传功能？

JavaScript プログレスバーを備えたファイルアップロード機能を実装するにはどうすればよいですか?

現代の Web 開発では、ファイルのアップロードは一般的な操作です。ユーザーエクスペリエンスを向上させるには、プログレスバーを備えたファイルアップロード機能を追加する必要があります。この記事では、JavaScript を使用してプログレスバー付きのファイルアップロード機能を実装する方法と具体的なコード例を紹介します。

1. フロントエンドページのレイアウト

まず、フロントエンドページにファイル選択ボタン、プログレスバー、アップロードボタンを含むレイアウトを構築する必要があります。

<!DOCTYPE html>
<html>
<head>
    <title>带进度条的文件上传</title>
</head>
<body>
    <h1>带进度条的文件上传</h1>
    <input type="file" id="fileInput">
    <progress id="progressBar" value="0" max="100"></progress>
    <button onclick="uploadFile()">上传</button>
</body>
</html>

ログイン後にコピー

上記のコードでは、要素を使用してファイル選択ボタンを作成し、要素を使用して進行状況バーを作成し、要素をトリガーします。アップロードアクションボタン。

2. JavaScript によるアップロード機能の実装

次に、JavaScript を使用してファイルアップロード機能を実装し、アップロードプロセス中に進行状況バーをリアルタイムで更新します。

function uploadFile() {
    var fileInput = document.getElementById("fileInput");
    var file = fileInput.files[0];
    
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/upload", true);

    xhr.upload.addEventListener("progress", function(e) {
        if (e.lengthComputable) {
            var percentComplete = Math.round((e.loaded / e.total) * 100);
            var progressBar = document.getElementById("progressBar");
            progressBar.value = percentComplete;
        }
    }, false);

    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log("上传完成");
        }
    };

    xhr.send(file);
}

ログイン後にコピー

上記のコードでは、まずファイル選択ボタンの要素を取得し、選択されたファイルを取得します。次に、XMLHttpRequest オブジェクトを作成し、POST リクエストの URL を指定します。ここでは、実際の状況に応じて独自のバックエンドインターフェイスアドレスに変更する必要があります。

次に、アップロードプロセス中に進行状況イベントをリッスンし、アップロードのパーセンテージを計算し、進行状況が更新されるたびに進行状況バーの値を更新します。

リクエストのreadyStateが4(リクエスト完了)に変化し、ステータスが200(リクエスト成功)になった場合、ファイルのアップロードが完了したと判断できます。

3. ファイルアップロードのバックエンド処理

上記のコードはフロントエンドのファイルアップロードロジックのみを処理し、対応する処理をバックエンドで実行する必要があります。ここでは Node.js を例として取り上げ、Express フレームワークを使用してファイルのアップロード要求を処理し、ファイルをサーバーに保存します。

const express = require('express');
const multer = require('multer');
const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), function (req, res, next) {
    // 文件上传成功后的处理逻辑
    console.log(req.file);
});

ログイン後にコピー

このコードでは、最初に Express モジュールと multer モジュールを導入し、multer ミドルウェアを使用してファイルアップロードリクエストを処理します。 multer は、ファイルアップロードのターゲットディレクトリを「uploads/」に設定し、upload.single('file') を使用して「file」という名前のファイルを受信します。

ファイルが正常にアップロードされた後、req.file オブジェクトをコンソールに出力できます。このオブジェクトには、ファイル名、ファイルサイズなど、アップロードされたファイルに関する関連情報が含まれています。

4. 概要

上記のコード例を通じて、進行状況バーを備えたファイルアップロード機能を実装することに成功しました。フロントエンド部分では、JavaScript を使用してアップロードプロセス中の進行状況イベントを監視し、進行状況バーの値をリアルタイムで更新します。バックエンド部分では、ファイルのアップロード要求が Express フレームワークと Multer ミドルウェアを通じて処理され、ファイルがサーバーに保存されます。

実際のプロジェクトで使用する必要がある場合は、実際の状況に応じてコードを修正してください。この記事が、高速で便利なファイルアップロード機能の実装に役立つことを願っています。

以上がJavaScriptでプログレスバー付きのファイルアップロード機能を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。