Pada artikel ini kita akan membahas tentang mengirimkan formulir HTML. dengan atau tanpa bundel, dengan segmen tambahan dan lain-lain
Objek dapat membantu untuk melakukan itu. seperti yang sudah Anda duga, FormData adalah objek yang mewakili data formulir HTML
Pembina adalah
let formData = new FormData([form]);
Jika elemen HTML form tersedia, maka bagian yang tersedia akan direkam secara otomatis
Hal khusus tentang FormData adalah metode koneksi. Seperti fetch yang dapat menerima objek FormData sebagai badan permintaan kemudian dikodekan dan dikirim dengan format <form id="formElem"> <input type="text" name="name" value="John" /> <input type="text" name="surname" value="Smith" /> <input type="submit" /> </form> <script> formElem.onsubmit = async (e) => { e.preventDefault(); let response = await fetch('/article/formdata/post/user', { method: 'POST', body: new FormData(formElem) }); let result = await response.json(); alert(result.message); }; </script>1
Dari sudut pandang server, ini terlihat seperti pengiriman formulir biasa
Mari kirimkan formulir sederhana terlebih dahulu
Seperti yang Anda lihat, hampir hanya satu baris
<form id="formElem"> <input type="text" name="name" value="John" /> <input type="text" name="surname" value="Smith" /> <input type="submit" /> </form> <script> formElem.onsubmit = async (e) => { e.preventDefault(); let response = await fetch('/article/formdata/post/user', { method: 'POST', body: new FormData(formElem) }); let result = await response.json(); alert(result.message); }; </script>_
Dalam contoh ini, kode server tidak ditampilkan karena berada di luar cakupan topik ini. Server menerima permintaan POST dan memberikan balasan "Pengguna disimpan"
Kita dapat memodifikasi bagian formulir di FormData dengan metode
- <form id="formElem"> <input type="text" name="name" value="John" /> <input type="text" name="surname" value="Smith" /> <input type="submit" /> </form> <script> formElem.onsubmit = async (e) => { e.preventDefault(); let response = await fetch('/article/formdata/post/user', { method: 'POST', body: new FormData(formElem) }); let result = await response.json(); alert(result.message); }; </script>_3 – mengambil bagian formulir dengan <form id="formElem"> <input type="text" name="name" value="John" /> <input type="text" name="surname" value="Smith" /> <input type="submit" /> </form> <script> formElem.onsubmit = async (e) => { e.preventDefault(); let response = await fetch('/article/formdata/post/user', { method: 'POST', body: new FormData(formElem) }); let result = await response.json(); alert(result.message); }; </script>4 dan <form id="formElem"> <input type="text" name="name" value="John" /> <input type="text" name="surname" value="Smith" /> <input type="submit" /> </form> <script> formElem.onsubmit = async (e) => { e.preventDefault(); let response = await fetch('/article/formdata/post/user', { method: 'POST', body: new FormData(formElem) }); let result = await response.json(); alert(result.message); }; </script>5 diberikan,
- <form id="formElem"> <input type="text" name="name" value="John" /> <input type="text" name="surname" value="Smith" /> <input type="submit" /> </form> <script> formElem.onsubmit = async (e) => { e.preventDefault(); let response = await fetch('/article/formdata/post/user', { method: 'POST', body: new FormData(formElem) }); let result = await response.json(); alert(result.message); }; </script>_6 – menambahkan bagian formulir seolah-olah <form id="formElem"> <input type="text" name="name" value="John" /> <input type="text" name="surname" value="Smith" /> <input type="submit" /> </form> <script> formElem.onsubmit = async (e) => { e.preventDefault(); let response = await fetch('/article/formdata/post/user', { method: 'POST', body: new FormData(formElem) }); let result = await response.json(); alert(result.message); }; </script>7, argumen ketiga <form id="formElem"> <input type="text" name="name" value="John" /> <input type="text" name="surname" value="Smith" /> <input type="submit" /> </form> <script> formElem.onsubmit = async (e) => { e.preventDefault(); let response = await fetch('/article/formdata/post/user', { method: 'POST', body: new FormData(formElem) }); let result = await response.json(); alert(result.message); }; </script>8 digunakan untuk menetapkan nama file (bukan nama bagian formulir) sebagai nama file di sistem file pengguna,
- <form id="formElem"> <input type="text" name="name" value="John" /> <input type="text" name="surname" value="Smith" /> <input type="submit" /> </form> <script> formElem.onsubmit = async (e) => { e.preventDefault(); let response = await fetch('/article/formdata/post/user', { method: 'POST', body: new FormData(formElem) }); let result = await response.json(); alert(result.message); }; </script>_9 – hapus bagian formulir dengan <form id="formElem"> <input type="text" name="name" value="John" /> <input type="text" name="surname" value="Smith" /> <input type="submit" /> </form> <script> formElem.onsubmit = async (e) => { e.preventDefault(); let response = await fetch('/article/formdata/post/user', { method: 'POST', body: new FormData(formElem) }); let result = await response.json(); alert(result.message); }; </script>4 yang diberikan,
- let formData = new FormData(); formData.append('kunci1', 'nilai1'); formData.append('kunci2', 'nilai2'); // Daftar pasangan kunci/nilai for (let [name, value] of formData) { alert(`${name} = ${value}`); // kunci1=nilai1, maka kunci2=nilai2 }_1 – dapatkan nilai dari bidang formulir dengan <form id="formElem"> <input type="text" name="name" value="John" /> <input type="text" name="surname" value="Smith" /> <input type="submit" /> </form> <script> formElem.onsubmit = async (e) => { e.preventDefault(); let response = await fetch('/article/formdata/post/user', { method: 'POST', body: new FormData(formElem) }); let result = await response.json(); alert(result.message); }; </script>4 yang diberikan,
- let formData = new FormData(); formData.append('kunci1', 'nilai1'); formData.append('kunci2', 'nilai2'); // Daftar pasangan kunci/nilai for (let [name, value] of formData) { alert(`${name} = ${value}`); // kunci1=nilai1, maka kunci2=nilai2 }_3 – jika ada bagian pada formulir yang memiliki <form id="formElem"> <input type="text" name="name" value="John" /> <input type="text" name="surname" value="Smith" /> <input type="submit" /> </form> <script> formElem.onsubmit = async (e) => { e.preventDefault(); let response = await fetch('/article/formdata/post/user', { method: 'POST', body: new FormData(formElem) }); let result = await response.json(); alert(result.message); }; </script>4 maka itu akan mengembalikan nilai let formData = new FormData(); formData.append('kunci1', 'nilai1'); formData.append('kunci2', 'nilai2'); // Daftar pasangan kunci/nilai for (let [name, value] of formData) { alert(`${name} = ${value}`); // kunci1=nilai1, maka kunci2=nilai2 }5, jika tidak maka let formData = new FormData(); formData.append('kunci1', 'nilai1'); formData.append('kunci2', 'nilai2'); // Daftar pasangan kunci/nilai for (let [name, value] of formData) { alert(`${name} = ${value}`); // kunci1=nilai1, maka kunci2=nilai2 }6
Suatu formulir secara teknis memungkinkan memiliki beberapa bidang formulir dengan nama yang sama, jadi beberapa penggunaan let formData = new FormData(); formData.append('kunci1', 'nilai1'); formData.append('kunci2', 'nilai2'); // Daftar pasangan kunci/nilai for (let [name, value] of formData) { alert(`${name} = ${value}`); // kunci1=nilai1, maka kunci2=nilai2 }7 akan menambahkan lebih banyak bidang formulir dengan nama yang sama
Ada juga metode let formData = new FormData(); formData.append('kunci1', 'nilai1'); formData.append('kunci2', 'nilai2'); // Daftar pasangan kunci/nilai for (let [name, value] of formData) { alert(`${name} = ${value}`); // kunci1=nilai1, maka kunci2=nilai2 }_8 dengan sintaks yang sama dengan let formData = new FormData(); formData.append('kunci1', 'nilai1'); formData.append('kunci2', 'nilai2'); // Daftar pasangan kunci/nilai for (let [name, value] of formData) { alert(`${name} = ${value}`); // kunci1=nilai1, maka kunci2=nilai2 }7. Perbedaannya adalah <form id="formElem"> <input type="text" name="firstName" value="John" /> Picture: <input type="file" name="picture" accept="image/*" /> <input type="submit" /> </form> <script> formElem.onsubmit = async (e) => { e.preventDefault(); let response = await fetch('/article/formdata/post/user-avatar', { method: 'POST', body: new FormData(formElem) }); let result = await response.json(); alert(result.message); }; </script>_0 menghapus semua bagian formulir dengan nama yang diberikan lalu menambahkan bagian formulir baru. Jadi, itu memastikan bahwa hanya ada satu bidang formulir dengan nama itu, sisanya seperti let formData = new FormData(); formData.append('kunci1', 'nilai1'); formData.append('kunci2', 'nilai2'); // Daftar pasangan kunci/nilai for (let [name, value] of formData) { alert(`${name} = ${value}`); // kunci1=nilai1, maka kunci2=nilai2 }7
- <form id="formElem"> <input type="text" name="firstName" value="John" /> Picture: <input type="file" name="picture" accept="image/*" /> <input type="submit" /> </form> <script> formElem.onsubmit = async (e) => { e.preventDefault(); let response = await fetch('/article/formdata/post/user-avatar', { method: 'POST', body: new FormData(formElem) }); let result = await response.json(); alert(result.message); }; </script>2,
- <form id="formElem"> <input type="text" name="firstName" value="John" /> Picture: <input type="file" name="picture" accept="image/*" /> <input type="submit" /> </form> <script> formElem.onsubmit = async (e) => { e.preventDefault(); let response = await fetch('/article/formdata/post/user-avatar', { method: 'POST', body: new FormData(formElem) }); let result = await response.json(); alert(result.message); }; </script>3
Kita juga dapat mengulang bagian formData menggunakan <form id="formElem"> <input type="text" name="firstName" value="John" /> Picture: <input type="file" name="picture" accept="image/*" /> <input type="submit" /> </form> <script> formElem.onsubmit = async (e) => { e.preventDefault(); let response = await fetch('/article/formdata/post/user-avatar', { method: 'POST', body: new FormData(formElem) }); let result = await response.json(); alert(result.message); }; </script>4
let formData = new FormData(); formData.append('kunci1', 'nilai1'); formData.append('kunci2', 'nilai2'); // Daftar pasangan kunci/nilai for (let [name, value] of formData) { alert(`${name} = ${value}`); // kunci1=nilai1, maka kunci2=nilai2 }
Formulir selalu mengirimkan data sebagai <form id="formElem"> <input type="text" name="name" value="John" /> <input type="text" name="surname" value="Smith" /> <input type="submit" /> </form> <script> formElem.onsubmit = async (e) => { e.preventDefault(); let response = await fetch('/article/formdata/post/user', { method: 'POST', body: new FormData(formElem) }); let result = await response.json(); alert(result.message); }; </script>_1, pengkodean ini memungkinkan pengiriman file. Jadi, bagian <form id="formElem"> <input type="text" name="name" value="John" /> <input type="text" name="surname" value="Smith" /> <input type="submit" /> </form> <script> formElem.onsubmit = async (e) => { e.preventDefault(); let response = await fetch('/article/formdata/post/user', { method: 'POST', body: new FormData(formElem) }); let result = await response.json(); alert(result.message); }; </script>_7 juga dapat dikirim, mirip dengan pengiriman formulir biasa
Berikut adalah contoh formulirnya
<form id="formElem"> <input type="text" name="firstName" value="John" /> Picture: <input type="file" name="picture" accept="image/*" /> <input type="submit" /> </form> <script> formElem.onsubmit = async (e) => { e.preventDefault(); let response = await fetch('/article/formdata/post/user-avatar', { method: 'POST', body: new FormData(formElem) }); let result = await response.json(); alert(result.message); }; </script>
Seperti yang telah kita lihat dalam pembahasan Ambil, di mana sangat mudah untuk mengirim data biner yang dihasilkan secara dinamis, misalnya gambar sebagai <form id="formElem"> <input type="text" name="firstName" value="John" /> Picture: <input type="file" name="picture" accept="image/*" /> <input type="submit" /> </form> <script> formElem.onsubmit = async (e) => { e.preventDefault(); let response = await fetch('/article/formdata/post/user-avatar', { method: 'POST', body: new FormData(formElem) }); let result = await response.json(); alert(result.message); }; </script>7. Kita bisa langsung menjadikannya sebagai parameter ________20______8 fetch
Meskipun dalam praktiknya, seringkali lebih mudah mengirim gambar tidak secara terpisah tetapi sebagai bagian dari formulir dengan bidang tambahan seperti "nama" dan metadata lainnya
Selain itu, server biasanya lebih cocok untuk menerima formulir yang disandikan dengan <form id="formElem"> <input type="text" name="name" value="John" /> <input type="text" name="surname" value="Smith" /> <input type="submit" /> </form> <script> formElem.onsubmit = async (e) => { e.preventDefault(); let response = await fetch('/article/formdata/post/user', { method: 'POST', body: new FormData(formElem) }); let result = await response.json(); alert(result.message); }; </script>1 daripada data biner mentah
Contoh di bawah mengirimkan gambar dari <body style="margin:0"> <canvas id="canvasElem" width="100" height="80" style="border:1px solid"></canvas> <input type="button" value="Submit" title="submit()" /> <script> canvasElem.onmousemove = function(e) { let ctx = canvasElem.getContext('2d'); ctx.lineTo(e.clientX, e.clientY); ctx.stroke(); }; async function submit() { let imageBlob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png')); let formData = new FormData(); formData.append("firstName", "John"); formData.append("image", imageBlob, "image.png"); let response = await fetch('/article/formdata/post/image-form', { method: 'POST', body: formData }); let result = await response.json(); alert(result.message); } </script> </body>1 bersama dengan bidang formulir lainnya menggunakan FormData
<body style="margin:0"> <canvas id="canvasElem" width="100" height="80" style="border:1px solid"></canvas> <input type="button" value="Submit" title="submit()" /> <script> canvasElem.onmousemove = function(e) { let ctx = canvasElem.getContext('2d'); ctx.lineTo(e.clientX, e.clientY); ctx.stroke(); }; async function submit() { let imageBlob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png')); let formData = new FormData(); formData.append("firstName", "John"); formData.append("image", imageBlob, "image.png"); let response = await fetch('/article/formdata/post/image-form', { method: 'POST', body: formData }); let result = await response.json(); alert(result.message); } </script> </body>
Perhatikan bagaimana gambar <form id="formElem"> <input type="text" name="firstName" value="John" /> Picture: <input type="file" name="picture" accept="image/*" /> <input type="submit" /> </form> <script> formElem.onsubmit = async (e) => { e.preventDefault(); let response = await fetch('/article/formdata/post/user-avatar', { method: 'POST', body: new FormData(formElem) }); let result = await response.json(); alert(result.message); }; </script>7 ditambahkan
formData.append('image', imageBlob, 'image.png');
Sepertinya ada <body style="margin:0"> <canvas id="canvasElem" width="100" height="80" style="border:1px solid"></canvas> <input type="button" value="Submit" title="submit()" /> <script> canvasElem.onmousemove = function(e) { let ctx = canvasElem.getContext('2d'); ctx.lineTo(e.clientX, e.clientY); ctx.stroke(); }; async function submit() { let imageBlob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png')); let formData = new FormData(); formData.append("firstName", "John"); formData.append("image", imageBlob, "image.png"); let response = await fetch('/article/formdata/post/image-form', { method: 'POST', body: formData }); let result = await response.json(); alert(result.message); } </script> </body>_4 di formulir kemudian pengunjung mengirim file dengan nama <body style="margin:0"> <canvas id="canvasElem" width="100" height="80" style="border:1px solid"></canvas> <input type="button" value="Submit" title="submit()" /> <script> canvasElem.onmousemove = function(e) { let ctx = canvasElem.getContext('2d'); ctx.lineTo(e.clientX, e.clientY); ctx.stroke(); }; async function submit() { let imageBlob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png')); let formData = new FormData(); formData.append("firstName", "John"); formData.append("image", imageBlob, "image.png"); let response = await fetch('/article/formdata/post/image-form', { method: 'POST', body: formData }); let result = await response.json(); alert(result.message); } </script> </body>5 (argumen ke-3) dengan data <body style="margin:0"> <canvas id="canvasElem" width="100" height="80" style="border:1px solid"></canvas> <input type="button" value="Submit" title="submit()" /> <script> canvasElem.onmousemove = function(e) { let ctx = canvasElem.getContext('2d'); ctx.lineTo(e.clientX, e.clientY); ctx.stroke(); }; async function submit() { let imageBlob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png')); let formData = new FormData(); formData.append("firstName", "John"); formData.append("image", imageBlob, "image.png"); let response = await fetch('/article/formdata/post/image-form', { method: 'POST', body: formData }); let result = await response.json(); alert(result.message); } </script> </body>6 (argumen ke-2) dari sistem file
Server membaca data formulir dan file seolah-olah itu adalah pengiriman formulir normal
Objek digunakan untuk mengambil formulir HTML dan mengirimkannya menggunakan fetch atau metode jaringan lainnya
Kita dapat membuat <body style="margin:0"> <canvas id="canvasElem" width="100" height="80" style="border:1px solid"></canvas> <input type="button" value="Submit" title="submit()" /> <script> canvasElem.onmousemove = function(e) { let ctx = canvasElem.getContext('2d'); ctx.lineTo(e.clientX, e.clientY); ctx.stroke(); }; async function submit() { let imageBlob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png')); let formData = new FormData(); formData.append("firstName", "John"); formData.append("image", imageBlob, "image.png"); let response = await fetch('/article/formdata/post/image-form', { method: 'POST', body: formData }); let result = await response.json(); alert(result.message); } </script> </body>8 dari formulir HTML atau membuat objek FormData tanpa formulir HTML dan kemudian menambahkan bagian formulir dengan metode berikut