Semua yang anda perlu tahu tentang objek `FormData` dalam JavaScript

Apabila bekerja dengan data daripada borang HTML dalam JavaScript, anda sering menghadapi keperluan untuk mengumpul, memanipulasi dan menghantar data tersebut ke pelayan. Di sinilah FormData masuk — API pengurusan borang yang berkuasa dan fleksibel. Dalam siaran ini, kami akan menerangkan secara terperinci cara FormData berfungsi, faedahnya dan cara anda boleh menggunakannya dalam senario dunia sebenar.

---

Apakah itu FormData?

FormData ialah objek JavaScript terbenam yang membolehkan:

• Pengumpulan data ringkas daripada borang HTML.

• Menghantar data tersebut ke pelayan menggunakan API fetch atau XMLHttpRequest.

• Kerja dengan data binari, seperti fail.

Objek ini secara automatik memformat data mengikut jenis MIME multipart/form-data, menjadikannya ideal untuk menghantar data yang kompleks, termasuk fail.

---

Bagaimana untuk mencipta objek FormData?

Mencipta objek FormData kosong

Jika anda ingin menambah data secara manual, gunakan pembina FormData kosong:

const formData = new FormData();
formData.append('username', 'Jelena');
formData.append('email', 'jelena@example.com');

Mencipta objek FormData daripada borang

Jika anda mempunyai borang HTML, anda boleh terus menghantar rujukan borang kepada pembina FormData, yang akan mengumpulkan semua data daripadanya secara automatik.

const form = document.getElementById('registrationForm');
const formData = new FormData(form);

---

Menambah data

Data dilampirkan menggunakan kaedah .append(kunci, nilai):

formData.append('firstName', 'Jelena');
formData.append('lastName', 'Petković');

Jika menambah fail daripada , hanya gunakan .files[0]:

const fileInput = document.getElementById('profilePicture');
formData.append('profilePicture', fileInput.files[0]);

---

Membaca data

Untuk lelaran melalui data dalam objek FormData, gunakan gelung for...of bersama-sama dengan kaedah .entry():

for (let [key, value] of formData.entries()) {
  console.log(`${key}: ${value}`);
}

---

Menghantar data FormData ke pelayan

FormData sesuai untuk menghantar data ke pelayan menggunakan API pengambilan. Berikut ialah contoh mudah:

fetch('https://example.com/api/register', {
  method: 'POST',
  body: formData, // Automatski formatiran kao multipart/form-data
})
  .then(response => response.json())
  .then(data => console.log('Uspešno registrovano:', data))
  .catch(error => console.error('Greška:', error));

Tidak perlu menetapkan pengepala Jenis Kandungan secara manual; FormData melakukan ini secara automatik.

---

Kelebihan FormData

1. Bekerja dengan fail
   
   FormData membolehkan anda menambah dan menghantar fail terus dengan mudah daripada medan.

2. Pensiri Automatik
   
   Daripada memformat data secara manual, FormData memformatkannya secara automatik ke dalam berbilang bahagian/data-bentuk.

3. Fleksibiliti
   
   Pengurusan pasangan nilai kunci yang mudah, termasuk keupayaan untuk mengulang dan mengemas kini data.

4. Sokongan data binari
   
   Ia sesuai untuk menghantar data binari seperti imej, PDF atau fail lain.

---

Contoh daripada amalan: Borang pendaftaran

Berikut ialah contoh lengkap di mana kami mengumpul data daripada borang dan menghantarnya ke pelayan:

Borang HTML

const formData = new FormData();
formData.append('username', 'Jelena');
formData.append('email', 'jelena@example.com');

---

Petua berguna

• Jika anda ingin mengubah suai data secara manual, gunakan .set(key, value) dan bukannya .append().

• Anda boleh menyemak sama ada kunci tertentu wujud menggunakan kaedah .has(key).

• Untuk mengalih keluar data, gunakan .delete(key).

---

Kesimpulan

FormData ialah alat yang berkuasa untuk bekerja dengan data borang. Ia membolehkan pengumpulan, manipulasi dan penghantaran data dengan mudah, walaupun semasa bekerja dengan fail. Fleksibiliti dan penyepaduan mudahnya dengan API JavaScript moden menjadikannya amat diperlukan untuk banyak aplikasi web.

Atas ialah kandungan terperinci Semua yang anda perlu tahu tentang objek `FormData` dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!