Bagaimana untuk Melaksanakan Muat Naik Fail dengan JavaScript?

Muat Naik Fail JavaScript

Memuat naik fail menggunakan JavaScript memerlukan urutan langkah untuk menangkap fail yang dipilih, membuat permintaan dan mengendalikan pemberitahuan.

Menangkap Fail

Apabila pengguna mengklik butang input fail, penyemak imbas membenarkan mereka memilih fail melalui "Fail buka..." dialog. Nama fail yang dipilih disimpan dalam:

document.getElementById("image-file").value

Membuat Permintaan

Untuk menghantar fail ke pelayan, kami menggunakan permintaan POST berbilang bahagian. Cara biasa untuk membina permintaan sedemikian ialah menggunakan API FormData:

let formData = new FormData();
formData.append("photo", photo);

Menghantar Permintaan

API pengambilan membenarkan muat naik fail tak segerak:

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

Mendengar untuk Pemberitahuan

Untuk mendengar selesai muat naik, beberapa pendekatan boleh dilakukan digunakan:

1. Peristiwa Kemajuan XHR: Gunakan objek XMLHttpRequest untuk menjejak kemajuan dan penyiapan muat naik.
2. Pembaca Fail dengan Acara Tersuai: Baca kandungan fail menggunakan FileReader dan hantar acara tersuai untuk kemajuan dan selesai.
3. Perpustakaan: Manfaatkan perpustakaan JavaScript seperti Axios atau Multer, yang memudahkan muat naik fail dan menyediakan keupayaan pengendalian kemajuan terbina dalam.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Muat Naik Fail dengan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!