HTML5 FORMDATA วิธีการแนะนำและการใช้งานไฟล์ในไฟล์การใช้งาน

XMLHTTPREQUEST เป็นอินเทอร์เฟซเบราว์เซอร์ XMLHTTPREQUEST เป็นวิธีที่ใช้กันทั่วไปในการโต้ตอบข้อมูลในเบราว์เซอร์ปัจจุบัน ในเดือนกุมภาพันธ์ 2551 มีการเสนอ XMLHTTTPREQUEST ระดับ 2 ที่คุณสามารถอัปโหลดไฟล์ไบนารี มาแนะนำวิธีอัปโหลดไฟล์ด้วย formData

ก่อนอื่นให้ดูที่วิธีพื้นฐานของ FormData: FormData Object คุณสามารถสร้าง QueryString ขององค์ประกอบและมูลค่าทั้งหมดของตารางและส่งไปยังพื้นหลัง เพียงแค่ผ่านแบบฟอร์มเป็นพารามิเตอร์ในตัวสร้าง formdata:

 var form = document.getElementById (Form1);

ด้วยวิธีนี้ FD สามารถส่งโดยตรงผ่านวิธี AJAX SEND () ไปยังพื้นหลัง

แบบฟอร์มต่อไปนี้ถูกสร้างขึ้น

 <form name = form1 id = form1> <p> ชื่อ: <อินพุตประเภท = ชื่อข้อความ = ชื่อ /> <p> เพศ: <อินพุตประเภท = ชื่อวิทยุ = ค่าเพศ = 1 /> male <อินพุตประเภท = ชื่อวิทยุ = ค่าเพศ = 2 /p> หญิง </p> <p> stu-number: <อินพุตประเภท = ชื่อข้อความ = หมายเลข /> </p> <p> รูปภาพ: <อินพุตประเภท = ชื่อไฟล์ = รูปภาพรูปภาพ = รูปภาพ> </p> <p> <ประเภทอินพุต = ชื่อปุ่ม = b1 value = ส่ง onClick = fSubMit ()/p> </form> <div id = ผลลัพธ์> </div>

รหัสด้านบนสร้างแบบฟอร์มเพียงกรอกข้อมูลบางอย่างและเลือกรูปภาพเป็นอวตารตั้งค่า div เพื่อจัดเก็บผลลัพธ์ของการส่งคืน

สำหรับง่ายเรายังคงใช้ Ajax ที่ห่อหุ้มด้วย jQuery เพื่อถ่ายโอนข้อมูลไปยังพื้นหลัง:

 function fsubmit () {var form = document.getElementById (form1); บอกว่า jQuery ไม่ประมวลผลเนื้อหาการส่งข้อมูล TYTYPE: FALSE, // บอก jQuery เพื่อไม่ให้ตั้งค่าความสำเร็จของการร้องขอประเภทเนื้อหา: ฟังก์ชั่น (การตอบสนอง, สถานะ, XHR) {console.log (XHR); EJSON (การตอบสนอง); + json ['number']; .html (ผลลัพธ์);}});

Server.php ในรหัสด้านบนเป็นไฟล์ของเซิร์ฟเวอร์ที่ได้รับคำขอ AJAX และส่งคืนผลลัพธ์ที่ได้รับ

 <? ISSET ($ _ post ['number'])? ['name'] = $ name; '] = false;} echo json_encode ($ response);?>

หลังจากกรอกข้อมูลให้คลิกส่งเพื่อรับเอฟเฟกต์ต่อไปนี้ในหน้า

หากคุณเป็นผู้ที่ชื่นชอบ JavaScript พื้นเมืองแน่นอนว่าฟังก์ชั่นข้างต้นสามารถทำได้

 fsubmit () {var form = document.getElementById (Form1); (olq. ReadyState == 4) {ถ้า (oreq.status == 200) {console.log (typeof oreq.responsetext); ข้อมูลส่วนบุคคล: <br/> ชื่อ:+json ['name']+<br/> เพศ:+json ['เพศ']+<br/> หมายเลข:+json ['number']; <<< br /> avatar: <img src = ' + json [' photo '] +' height = 50 style = border-radius: 50%; โพสต์, server.php);

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

หลังจากคอนโซลเรามีการค้นพบที่สำคัญ

ผนวกเมธอด () ใช้เพื่อเพิ่มค่าคีย์ลงในวัตถุ FormData:

 fd.append ('key1', ค่า 1);

FD เป็นวัตถุของ FormData ซึ่งสามารถสร้างขึ้นใหม่ได้

ตั้งค่าคีย์ค่าคีย์ที่สอดคล้องกัน

 fd.set ('key1', ค่า 1);

มันดูคล้ายกับวิธีการผนวก () ยังคงเปรียบเทียบผ่านตัวอย่างเราอยู่บนพื้นฐานของแบบฟอร์มของแบบฟอร์ม

 fd.append ('ชื่อ', Will);

สองคีย์คือค่าคีย์ของชื่อ:

 fd.set ('ชื่อ', Will);

คีย์เดียวคือค่าคีย์ของชื่อ:

ข้างต้นคือความแตกต่างระหว่างภาคผนวก () และชุด () หากไม่มีการตั้งค่าชุดผลของทั้งสองจะเหมือนกัน

รับพารามิเตอร์ระบุว่าชื่อของค่าคีย์ที่คุณต้องการลบหากมีค่าคีย์หลายค่าเดียวกันมันจะลบ:

 fd.append ('ชื่อ', 'Will');

ข้อมูลชื่อในรูปแบบและข้อมูลชื่อที่เพิ่มใหม่ผ่านภาคผนวก () ถูกลบไปแล้ว

รับพารามิเตอร์เพื่อระบุชื่อของคีย์ที่คุณต้องค้นหาและส่งคืนค่าค่าแรกของคีย์แรก หากมีคีย์เดียวกันหลายตัวและส่งคืนค่าที่สอดคล้องกันทั้งหมดของคีย์นี้

ขึ้นอยู่กับแบบฟอร์มข้างต้น:

 fd.append ('ชื่อ', 'Will');

 fd.append ('ชื่อ', 'Will');

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

 console.log (fd.has ('ชื่อ'));

วิธีนี้ไม่จำเป็นต้องได้รับพารามิเตอร์และส่งคืนตัววนซ้ำ แบบฟอร์มข้างต้นเป็นตัวอย่าง:

 สำหรับ (คีย์ var ของ fd.keys ()) {console.log (คีย์);}

ผลที่ได้คือ:

ชื่อ

เพศ

ตัวเลข

รูปถ่าย

ด้วยการวนซ้ำของคีย์แน่นอนว่ามันเป็นสิ่งที่ขาดไม่ได้ในการสำรวจค่าตัววนซ้ำ ค่า () เป็นตัววนซ้ำของค่า

 สำหรับ (ค่า var ของ fd.values ​​()) {console.log (ค่า);}

ผลลัพธ์:

มีตัววนซ้ำที่ข้ามคีย์และยังมีตัววนซ้ำที่มีค่าทำไมไม่เข้าร่วมสองคนด้วยกัน! รายการ () คือการส่งคืนตัววนซ้ำที่มีคู่ค่าคีย์:

 สำหรับ (คู่ของ fd.entries ()) {console.log (pair [0]+ ','+ pair [1]);}

ผลลัพธ์:

เนื่องจาก FormData เป็นอินเทอร์เฟซใหม่ของ XMLHTTTPREQUEST Level 2 เบราว์เซอร์ IE ที่ต่ำกว่า IE10 ไม่สนับสนุน FormData รูปด้านล่าง:

ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้