Bagaimana untuk Memuat naik Fail dengan JavaScript dan Menjejaki Kemajuannya?

Memuat Naik Fail dengan JavaScript

Untuk memuat naik fail yang dipilih melalui elemen input, anda boleh menggunakan objek FormData. Begini caranya:

1. Cipta Objek FormData:

let formData = new FormData();

2. Tambahkan Fail pada FormData:

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

3. Hantar Data ke Pelayan:

Menggunakan API pengambilan, anda boleh menghantar FormData ke URL yang ditentukan:

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

Mendengar untuk Kemajuan Muat Naik

Untuk memantau kemajuan muat naik, anda boleh menggunakan addEventListener() EventTarget kaedah:

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 + "%";
    }
});

Contoh Kod Lengkap

Menggabungkan muat naik fail dan penjejakan kemajuan menjadi satu contoh:

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 + "%";
    }
});

Kod ini akan buat permintaan POST ke URL "/upload/image", hantar data fail dan paparkan kemajuan muat naik menggunakan bar kemajuan.

Atas ialah kandungan terperinci Bagaimana untuk Memuat naik Fail dengan JavaScript dan Menjejaki Kemajuannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!