Objek FormData
Bina muatan berbilang bahagian daripada borang.
Objek FormData ialah pelajaran Akademi JavaScript percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Akademi JavaScript, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.
Apakah FormData?
FormData ialah antara muka pengaturcaraan aplikasi pelayar untuk membina set pasangan kunci/nilai yang mewakili medan borang dan nilainya. Ini ialah cara standard untuk membungkus data, termasuk fail, bagi menghantarnya ke pelayan.
Data ini dikodkan sebagai multipart/form-data, yang menyokong muat naik binari.
Mencipta FormData Kosong
Bina FormData kosong dan tambahkan medan satu demi satu dengan append.
const data = new FormData();
data.append('username', 'ada');
data.append('email', 'ada@example.com');
console.log(data.get('username'));Membina Daripada Elemen Borang
Luluskan elemen <form> kepada pembina dan setiap masukan bernama akan ditangkap secara automatik. Ini ialah penggunaan yang paling lazim.
const form = document.querySelector('#signup');
const data = new FormData(form);
for (const [key, value] of data.entries()) {
console.log(key, value);
}append berbanding set
append menambahkan nilai walaupun kunci itu sudah wujud, lalu membenarkan berbilang nilai bagi setiap kunci. set menggantikan semua nilai sedia ada bagi kunci tersebut.
const data = new FormData();
data.append('tag', 'a');
data.append('tag', 'b');
console.log(data.getAll('tag'));
data.set('tag', 'only');
console.log(data.getAll('tag'));Membaca Nilai
get mengembalikan nilai pertama bagi sesuatu kunci, getAll mengembalikan semua nilai sebagai tatasusunan, manakala has menyemak kewujudan.
const data = new FormData();
data.append('color', 'red');
data.append('color', 'blue');
console.log(data.get('color'));
console.log(data.getAll('color'));
console.log(data.has('color'));Memadam Medan
delete membuang semua nilai bagi sesuatu kunci. Ini berguna untuk membuang medan sebelum penghantaran.
const data = new FormData();
data.append('keep', '1');
data.append('remove', '2');
data.delete('remove');
console.log(data.has('remove'));
console.log(data.has('keep'));Melalui Entri
FormData boleh dilalui. Gunakan entries, keys atau values, atau gelung for...of, untuk melalui semua pasangan.
const data = new FormData();
data.append('a', '1');
data.append('b', '2');
for (const key of data.keys()) {
console.log('field: ' + key);
}Menambahkan Fail
append boleh menerima File atau Blob sebagai nilai. Argumen ketiga pilihan menetapkan nama fail yang dihantar kepada pelayan.
const fileInput = document.querySelector('#avatar');
const data = new FormData();
data.append('avatar', fileInput.files[0], 'profile.png');
console.log(data.get('avatar').name);Mengapa multipart/form-data
FormData disiri sebagai multipart/form-data, yang boleh membawa kedua-dua medan teks dan kandungan fail binari dalam satu badan permintaan. Oleh sebab itu, format ini menjadi pilihan utama untuk muat naik fail.
const data = new FormData();
data.append('title', 'Vacation Photo');
data.append('photo', new Blob(['binary'], { type: 'image/png' }), 'pic.png');
console.log(data.has('photo'));Menukar kepada Objek
Bagi borang yang hanya mengandungi teks, Object.fromEntries boleh menukar FormData kepada objek biasa. Perhatikan bahawa kaedah ini hanya mengekalkan satu nilai bagi setiap kunci yang berulang.
const form = document.querySelector('#login');
const data = new FormData(form);
const plain = Object.fromEntries(data.entries());
console.log(plain);Mengapa FormData Penting
FormData ialah penghubung antara borang HTML dan permintaan rangkaian. Ia mengumpulkan medan dan fail, menyokong kunci berulang, serta mengekod data binari dengan selamat. Seterusnya, anda akan membaca kandungan fail dengan FileReader, kemudian menghantar FormData menggunakan fetch.
const form = document.querySelector('#contact');
const data = new FormData(form);
data.append('source', 'web');
console.log([...data.keys()]);Semakan Ringkas
Apakah perbezaan antara append dan set pada FormData?
Imbas Kembali: Objek FormData
Anda telah mempelajari cara membungkus data borang:
new FormData(form)menangkap masukan bernama secara automatik.appendmembenarkan kunci berulang;setmenggantikannya.- Baca dengan
get,getAll,has; lalui denganentries. - Data dikodkan sebagai multipart/form-data, yang menyokong fail dan data binari.
Pelajari JavaScript dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 59
- Pelajaran
- 200
Soalan Lazim
Adakah pelajaran “Objek FormData” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Akademi JavaScript, termasuk “Objek FormData”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Objek FormData”?
Bina muatan berbilang bahagian daripada borang. Anda berlatih Akademi JavaScript menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Akademi JavaScript?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Akademi JavaScript di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.
Berapa lamakah pelajaran “Objek FormData” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Akademi JavaScript ini?
Ya. Setiap pelajaran Akademi JavaScript menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.