เกี่ยวกับ formdata
XMLHTTTPREQUEST Level 2 ได้เพิ่มอินเทอร์เฟซใหม่ --- formData
การใช้วัตถุ FormData คุณสามารถจำลองชุดการควบคุมแบบฟอร์มด้วยคู่คีย์-ค่าบางอย่างผ่าน JS คุณสามารถใช้วิธีการส่ง () ของ xmlhttprequest เพื่อส่งแบบฟอร์มแบบอะซิงโครนัส เมื่อเทียบกับ AJAX ทั่วไปข้อได้เปรียบที่ใหญ่ที่สุดของการใช้ FormData คือสามารถอัปโหลดไฟล์ไบนารีแบบอะซิงโครนัสได้
วัตถุ Formdata
วัตถุ FormData สามารถสร้างแบบสอบถามชื่อและค่าขององค์ประกอบแบบฟอร์มทั้งหมดและส่งไปยังพื้นหลัง การใช้วัตถุ FormData สามารถลดภาระงานของการเย็บ stitching querystring เมื่อส่งโดยใช้ AJAX
QueryString เป็นสตริงการสืบค้น, สตริงการสืบค้น HTTP มาจาก URL? ค่าต่อไปนี้ระบุ
เมื่อแบบฟอร์มในหน้าส่งข้อมูลที่ร้องขอไปยังหน้าในโหมด GET (หากข้อมูลมีอักขระที่ไม่ปลอดภัยเบราว์เซอร์จะแปลงเป็นอักขระเลขฐานสิบหกก่อนจากนั้นส่งเช่นเมื่อพื้นที่ถูกแปลงเป็น %20) เว็บเซิร์ฟเวอร์จะวางข้อมูลที่ร้องขอลงในตัวแปรสภาพแวดล้อม วิธีการร้องขอ QueryString คือการกำจัดค่าที่สอดคล้องกันจากตัวแปรสภาพแวดล้อมนี้และกู้คืนอักขระที่แปลงเป็น hexadecimal
อัปโหลดไฟล์และรูปภาพโดยใช้ formData
สร้างวัตถุว่างเปล่าฟอร์ดตาจากนั้นเพิ่มคีย์/ค่าโดยใช้วิธีการผนวก
var formData = new FormData (); formdata.append ("ชื่อ", "จางซาน");หากมีแบบฟอร์มอยู่แล้วให้รับวัตถุแบบฟอร์มและส่งผ่านไปยังวัตถุ FormData เป็นพารามิเตอร์
<! doctype html> <html> <head> <meta charset = "utf-8"/> <title> </title> </head> <body> <body> <form name = "form1" id = "form1"> <อินพุต id = "ไฟล์" file "file" Form = document.getElementById ("Form1"); var formData = new FormData (แบบฟอร์ม); </script> </body> </html>คุณสามารถเพิ่มคู่คีย์-ค่าใหม่ตามข้อมูลฟอร์มที่มีอยู่
var formData = new FormData (); formdata.append ("อายุ", "21");อัปโหลดไฟล์โดยใช้วัตถุ FormData
var formData = new FormData ($ ("#form1"). [0]); // รับวิธีไฟล์หนึ่ง // var formData = new FormData (); //formdata.append("file ", $ ("#ไฟล์ ") [0] .files [0]); // รับวิธีไฟล์สอง $ .ajax ({type: 'post', url: '#', data: formdata, cache: false, processData: false, // ไม่ได้ประมวลผลข้อมูล อย่าตั้งค่าส่วนหัวคำขอประเภทเนื้อหาความสำเร็จ: function () {} ข้อผิดพลาด: function () {}})ข้างต้นเป็นคำอธิบายที่สมบูรณ์ของวิธีการใช้ FormData เพื่ออัปโหลดไฟล์และรูปภาพใน JS แนะนำโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉัน!