Bagaimana untuk Muat Naik Fail Dengan JavaScript?

Cara Memuat Naik Fail Menggunakan JavaScript

Untuk memuat naik fail menggunakan JavaScript, anda boleh memanfaatkan langkah berikut:

1. Gunakan Borang Data:

   • Buat objek FormData untuk menyimpan fail dan data tambahan.
   • Tambahkan fail pada data borang menggunakan formData.append() .

2. Buat XHR Permintaan:

   • Buat objek XMLHttpRequest (XHR).
   • Tetapkan kaedah permintaan kepada "POST" dan URL ke titik akhir muat naik.
   • Tetapkan sifat badan objek XHR kepada formData .

3. Dengar untuk Muat Naik Acara:

   • Tambahkan pendengar acara pada objek XHR untuk memuatkan, kemajuan dan peristiwa ralat.
   • Dalam pengendali acara ini, anda boleh mengendalikan status muat naik dan respons.

Contoh Kod:

const formData = new FormData();
const fileInput = document.getElementById('image-file');
const file = fileInput.files[0];

formData.append('photo', file);

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload/image');
xhr.send(formData);

xhr.addEventListener('load', () => {
  // Handle successful upload
});

xhr.addEventListener('progress', (e) => {
  // Monitor upload progress
});

xhr.addEventListener('error', (e) => {
  // Handle upload errors
});

JavaScript Tulen:

Jika anda ingin menggunakan JavaScript tulen tanpa XHR, anda boleh menggunakan API ambil dengan FormData .

Contoh:

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

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

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