HTML Academy · บทเรียน

FormData API

รวบรวมข้อมูลแบบฟอร์มด้วยโปรแกรมผ่านอินเทอร์เฟซ FormData

FormData API เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

FormData คืออะไร

FormData คือวัตถุในตัวที่แทนช่องและค่าของแบบฟอร์ม เหมาะสำหรับการส่งโดยตรงผ่านกลไกดึงข้อมูลหรือคำขอเอ็กซ์เอ็มแอลเอชทีทีพี โดยจัดการการอัปโหลดไฟล์ การเข้ารหัสแบบหลายส่วน และคู่คีย์กับค่าโดยไม่ต้องแปลงข้อมูลด้วยตนเอง

สร้างจากแบบฟอร์ม

ส่งองค์ประกอบ <form> ให้กับตัวสร้าง: const data = new FormData(formElement) ผลลัพธ์จะมีตัวควบคุมในแบบฟอร์มทุกตัวที่ส่งค่าได้ เช่น อินพุตที่มีชื่อ รายการเลือก พื้นที่ข้อความ ช่องทำเครื่องหมายที่เลือก และไฟล์ ตัวควบคุมที่ปิดใช้งานหรือไม่ได้เลือกจะถูกตัดออกโดยอัตโนมัติ

document.forms.checkout.addEventListener("submit", async (e) => {
  e.preventDefault();
  const data = new FormData(e.target);
  await fetch("/api/checkout", { method: "POST", body: data });
});

ส่งด้วยการดึงข้อมูล

การส่ง FormData เป็นเนื้อหาของคำขอจะกำหนดชนิดเนื้อหาของคำขอเป็น multipart/form-data โดยอัตโนมัติ พร้อมขอบเขตที่ถูกต้อง อย่ากำหนดชนิดเนื้อหาด้วยตนเอง เพราะกลไกดึงข้อมูลจำเป็นต้องสร้างขอบเขตเอง

เพิ่ม ตั้งค่า ลบ

data.append(key, value) เพิ่มคีย์หนึ่งรายการและอนุญาตให้มีค่าซ้ำ data.set(key, value) แทนที่ค่าที่มีอยู่ของคีย์นั้น data.delete(key) ลบค่าทั้งหมดของคีย์หนึ่งรายการ data.has(key) ตรวจสอบว่ามีคีย์อยู่หรือไม่

const data = new FormData();
data.append("tag", "html");
data.append("tag", "css");
console.log(data.getAll("tag")); // ["html", "css"]

การอัปโหลดไฟล์

FormData จัดการไฟล์ได้โดยอัตโนมัติ: data.append("avatar", fileInput.files[0]) เซิร์ฟเวอร์จะได้รับการอัปโหลดแบบหลายส่วนพร้อมชื่อไฟล์และชนิด MIME นี่เป็นวิธีมาตรฐานสำหรับอัปโหลดไฟล์ด้วยการดึงข้อมูลในโค้ดสมัยใหม่

การวนซ้ำ

FormData สามารถวนซ้ำได้: for (const [key, value] of data) { ... } ใช้ data.entries() data.keys() และ data.values() สำหรับการวนซ้ำเฉพาะรายการ วิธีนี้มีประโยชน์สำหรับการบันทึกข้อมูล การตรวจสอบความถูกต้อง หรือการสร้างสำเนาเจสันของแบบฟอร์ม

แปลงเป็น JSON

หากต้องการส่งเป็นเจสันแทนการส่งแบบหลายส่วน Object.fromEntries(data) จะสร้างอ็อบเจ็กต์ธรรมดา แต่จะทำให้คีย์ซ้ำสูญหาย หากต้องการจัดการคีย์ซ้ำอย่างถูกต้อง ให้วนซ้ำรายการและจัดกลุ่มด้วยตนเอง สำหรับส่วนติดต่อโปรแกรมที่ใช้เจสันโดยเฉพาะ การสร้างอ็อบเจ็กต์โดยตรงจะง่ายกว่าโดยไม่ต้องผ่าน FormData

การเติมข้อมูลด้วยโปรแกรม

สร้าง FormData ว่างแล้วเพิ่มค่าด้วยตนเอง: const data = new FormData(); data.append("title", title); data.append("file", file); เหมาะสำหรับการส่งข้อมูลที่ไม่ได้มาจากแบบฟอร์ม เช่น ไฟล์ที่ลากมาวาง การตอบกลับจากส่วนติดต่อโปรแกรม หรือข้อมูลที่สร้างขึ้น

การตรวจหาปุ่มส่ง

หากมีปุ่มส่งหลายปุ่ม ให้ส่งปุ่มที่กดเป็นอาร์กิวเมนต์ตัวที่สองให้กับ FormData: new FormData(form, e.submitter) ชื่อและค่าของปุ่มส่งจะถูกรวมไว้ในข้อมูล ซึ่งสำคัญสำหรับแบบฟอร์มที่ทำงานได้หลายแบบ

ญาติของพารามิเตอร์ที่อยู่เว็บ

สำหรับการเข้ารหัสข้อมูลในที่อยู่เว็บ ซึ่งเป็นการเข้ารหัสเริ่มต้นของแบบฟอร์มที่ไม่มีไฟล์ ให้สร้าง URLSearchParams จาก FormData: new URLSearchParams(data) วิธีนี้ใช้ทรัพยากรน้อยกว่าการส่งแบบหลายส่วนสำหรับแบบฟอร์มที่มีเฉพาะข้อความ

ข้อผิดพลาดที่พบบ่อย

การกำหนดส่วนหัวชนิดเนื้อหาของการดึงข้อมูลเป็น "multipart/form-data" โดยตรงจะทำให้การอัปโหลดเสียหาย เพราะเบราว์เซอร์จะไม่สามารถเพิ่มขอบเขตที่จำเป็นได้อีก อย่ากำหนดชนิดเนื้อหาเมื่อส่ง FormData และปล่อยให้กลไกดึงข้อมูลจัดการเอง

ทดสอบความรู้

เหตุใดจึงไม่ควรกำหนดส่วนหัวชนิดเนื้อหาด้วยตนเองเมื่อส่ง FormData ด้วยการดึงข้อมูล

สรุป

FormData แทนเนื้อหาของแบบฟอร์มและส่งด้วยการดึงข้อมูลได้อย่างราบรื่น รวมถึงการอัปโหลดไฟล์ด้วยการส่งข้อมูลแบบหลายส่วน สร้างจากองค์ประกอบแบบฟอร์ม เพิ่ม ตั้งค่า หรือลบรายการ และวนซ้ำตามต้องการ อย่ากำหนดชนิดเนื้อหาเมื่อส่ง เพราะกลไกดึงข้อมูลจะสร้างขอบเขตให้อัตโนมัติ ใช้ URLSearchParams สำหรับแบบฟอร์มที่มีเฉพาะข้อความและเข้ารหัสไว้ในที่อยู่เว็บ

คำถามที่พบบ่อย

บทเรียน “FormData API” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “FormData API” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “FormData API”

รวบรวมข้อมูลแบบฟอร์มด้วยโปรแกรมผ่านอินเทอร์เฟซ FormData คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “FormData API” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม

ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ HTML Academy