Cara memuat naik satu atau beberapa fail dengan cara mudah dengan FormData

Dalam catatan ini, kita akan mengetahui mengenai antara muka FormData yang terdapat dalam penyemak imbas web moden sebagai sebahagian daripada spesifikasi HTML5.

Kita akan melihat contoh penggunaan FormData dengan Ajax, Angular 7, Ionic dan React.

Apa itu FormData

FormData hanyalah struktur data yang boleh digunakan untuk menyimpan pasangan kunci-nilai. Sama seperti namanya, ia direka untuk menyimpan data bentuk iaitu anda boleh menggunakannya dengan JavaScript untuk membangun objek yang sesuai dengan bentuk HTML. Ia sangat berguna apabila anda perlu menghantar data borang ke titik akhir API RESTful, misalnya untuk memuat naik fail tunggal atau berbilang menggunakan XMLHttpRequestantara muka, fetch()API atau Axios.

Anda boleh membuat objek FormData dengan memberi contoh antara muka FormData menggunakan newoperator seperti berikut:

const formData = new FormData() 

The formDatarujukan merujuk kepada satu contoh FormData. Anda boleh memanggil banyak kaedah pada objek untuk menambah dan bekerja dengan sepasang data. Setiap pasangan mempunyai kunci dan nilai.

Ini adalah kaedah yang tersedia pada objek FormData:

  • append(): digunakan untuk menambahkan pasangan nilai-kunci ke objek. Sekiranya kunci sudah ada, nilainya ditambahkan ke nilai asal untuk kunci itu,
  • delete(): digunakan untuk menghapus pasangan nilai-kunci,
  • entries(): mengembalikan objek Iterator yang boleh anda gunakan untuk melihat senarai pasangan nilai kunci dalam objek,
  • get(): digunakan untuk mengembalikan nilai kunci. Sekiranya beberapa nilai ditambahkan, ia mengembalikan nilai pertama,
  • getAll(): digunakan untuk mengembalikan semua nilai untuk kunci yang ditentukan,
  • has(): digunakan untuk memeriksa apakah ada kunci,
  • keys(): mengembalikan objek Iterator yang boleh anda gunakan untuk menyenaraikan kunci yang ada di objek,
  • set(): digunakan untuk menambahkan nilai ke objek, dengan kunci yang ditentukan. Ini akan mengaitkan nilai jika kunci sudah ada,
  • values(): mengembalikan objek Iterator untuk nilai objek FormData.

Contoh Muat Naik Fail dengan JavaScript Vanilla

Sekarang mari kita lihat contoh ringkas memuat naik fail menggunakan JavaScript vanilla, XMLHttpRequestdan FormData.

Arahkan ke folder kerja anda dan buat dan index.htmlfail dengan kandungan berikut:

   Parcel Sandbox 

Kami hanya membuat dokumen HTML dengan identiti yang dikenal pasti app. Seterusnya, kami memasukkan index.jsfail menggunakan tag.

Seterusnya, buat index.jsfail dan tambahkan kod berikut:

document.getElementById("app").innerHTML = ` 

File Upload & FormData Example

`; const fileInput = document.querySelector("#fileInput"); const uploadFile = file => { console.log("Uploading file..."); const API_ENDPOINT = "//file.io"; const request = new XMLHttpRequest(); const formData = new FormData(); request.open("POST", API_ENDPOINT, true); request.onreadystatechange = () => { if (request.readyState === 4 && request.status === 200) { console.log(request.responseText); } }; formData.append("file", file); request.send(formData); }; fileInput.addEventListener("change", event => { const files = event.target.files; uploadFile(files[0]); });

Kami mula-mula memasukkan elemen di halaman HTML kami. Ini akan digunakan untuk memilih fail yang akan kami muat naik.

Seterusnya, kami meminta elemen input fail menggunakan querySelector()kaedah.

Seterusnya, kami menentukan uploadFile()kaedah di mana kami pertama kali menyatakan   API_ENDPOINTpemboleh ubah yang menyimpan alamat titik akhir memuat naik fail kami. Seterusnya, kami membuat XMLHttpRequestpermintaan dan FormDataobjek kosong .

Kami menggunakan kaedah penambahan FormData untuk menambahkan fail, diteruskan sebagai parameter ke uploadFile()metode, ke filekunci. Ini akan membuat pasangan nilai-kunci dengan filesebagai kunci dan kandungan fail yang dilalui sebagai nilai.

Selanjutnya, kami mengirim permintaan menggunakan send()kaedah XMLHttpRequestdan kami meneruskan FormDataobjek sebagai argumen.

Setelah menentukan uploadFile()kaedah, kami mendengar peristiwa perubahan pada elemen dan kami memanggil   uploadFile()kaedah dengan fail yang dipilih sebagai argumen. Fail diakses dari event.target.filespelbagai.

Anda boleh bereksperimen dengan contoh ini dari kotak pasir kod ini:

Memuat naik Berbilang Fail

Anda boleh mengubah kod di atas dengan mudah untuk menyokong beberapa muat naik fail.

Pertama, anda perlu menambahkan multiplesifat ke elemen:

Sekarang, anda akan dapat memilih beberapa fail dari pemacu anda.

Seterusnya, ubah uploadFile()kaedah untuk menerima larik fail sebagai argumen dan hanya melengkapkan array dan menambahkan fail ke FormDataobjek:

const uploadFile = (files) => { console.log("Uploading file..."); const API_ENDPOINT = "//file.io"; const request = new XMLHttpRequest(); const formData = new FormData(); request.open("POST", API_ENDPOINT, true); request.onreadystatechange = () => { if (request.readyState === 4 && request.status === 200) { console.log(request.responseText); } }; for (let i = 0; i < files.length; i++) { formData.append(files[i].name, files[i]) } request.send(formData); }; 

Akhirnya, panggil kaedah dengan pelbagai fail sebagai argumen:

fileInput.addEventListener("change", event => { const files = event.target.files; uploadFile(files); }); 

Seterusnya, anda boleh melihat tutorial lanjutan ini untuk bagaimana menggunakan FormDataAngular, Ionic dan React:

  • Cara Menghantar FormData dengan Sudut 7
  • BentukData React & Axios
  • Muat Naik Fail Berganda dengan Ionic 4 & FormData