JavaScript を使用してファイルをアップロードし、その進行状況を追跡する方法

JavaScript を使用したファイルのアップロード

input 要素で選択したファイルをアップロードするには、FormData オブジェクトを使用できます。方法は次のとおりです:

1. FormData オブジェクトを作成します:

let formData = new FormData();

2.ファイルを FormData に追加します:

let photo = document.getElementById("image-file").files[0];
formData.append("photo", photo);

3.データをサーバーに送信します:

フェッチ API を使用すると、FormData を指定された URL に送信できます:

fetch('/upload/image', {method: "POST", body: formData});

アップロードの進行状況をリッスン

アップロードの進行状況を監視するには、EventTarget の addEventListener() を使用できます。メソッド:

let progressBar = document.getElementById("progress-bar");

formData.addEventListener("progress", (event) => {
    if (event.lengthComputable) {
        let percentComplete = Math.round((event.loaded / event.total) * 100);
        progressBar.style.width = percentComplete + "%";
    }
});

完全なコード例

ファイルのアップロードと進行状況の追跡を 1 つの例に結合します:

let formData = new FormData();
let photo = document.getElementById("image-file").files[0];
formData.append("photo", photo);

let progressBar = document.getElementById("progress-bar");

fetch('/upload/image', {method: "POST", body: formData})
.then((response) => {
    console.log(response);  // Handle server response
})
.catch((error) => {
    console.error(error);  // Handle upload failure
});

formData.addEventListener("progress", (event) => {
    if (event.lengthComputable) {
        let percentComplete = Math.round((event.loaded / event.total) * 100);
        progressBar.style.width = percentComplete + "%";
    }
});

このコードは、 「/upload/image」URL への POST リクエストを作成し、ファイル データを送信し、進行状況を使用してアップロードの進行状況を表示します。バー。

以上がJavaScript を使用してファイルをアップロードし、その進行状況を追跡する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。