เนื้อหาต่อไปนี้ เป็นบันทึกช่วยจำ เกี่ยวกับการประยุกต์ใช้งาน FormData Object จะสามารถใช้งาน
ได้เฉพาะในบราวเซอร์รุ่นใหม่ๆ เท่านั้น ดูบราวเซอร์ที่สนับสนุนการใช้งาน MLHttpRequest Level 2
รองรับ FormData Object ได้ที่
โดยส่วนใหญ่รองรับการใช้งานแล้ว
ก่อนอื่นมาทบทวนรูปแบบการส่งข้อมูลด้วย ajax แบบเดิม ที่ไม่รองรับ การส่ง input file
การส่งข้อมูลด้วย ajax ที่ไม่รองรับ การส่งค่า input file
ไฟล์ show_data.php สำหรับรับค่าข้อมูลที่ส่งผ่าน ajax (ในที่นี้จะแสดงข้อมูลที่ส่งมาเป็นตัวอย่างเท่านั้น)
1 2 3 4 5 6 7 8 9 | <?php if(isset($_POST["mytext1"])){ echo "<pre>"; print_r($_POST); print_r($_FILES); echo "</pre>"; exit;}?> |
ไฟล์ form_ajax1.php การส่งข้อมูลด้วย ajax
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title></head><body><br /><form action="" method="post" enctype="multipart/form-data" name="myform1" id="myform1"><input type="text" name="mytext1" id="mytext1"><br><input type="file" name="pic_upload" id="pic_upload" /><input type="submit" name="bt_upload" id="bt_upload" value="Submit" /></form><br><script type="text/javascript">$(function(){ // เมื่อฟอร์มการเรียกใช้ evnet submit ข้อมูล $("#myform1").on("submit",function(e){ e.preventDefault(); // ปิดการใช้งาน submit ปกติ เพื่อใช้งานผ่าน ajax // เตรียมข้อมูล form สำหรับส่ง var formData = $(this).serialize(); // ส่งค่าแบบ POST ไปยังไฟล์ show_data.php $.post("show_data.php",formData,function(data){ console.log(data); // ทดสอบแสดงค่า ดูผ่านหน้า console /*การใช้งาน console log เพื่อ debug javascript ใน chrome firefox และ ie https://www.ninenik.com/content.php?arti_id=692 via @ninenik */ }); }); });</script></body></html> |
เมื่อเราทดสอบรันโค้ดข้างด้ร โดยเลือกไฟล์ และก็พิมพ์ข้อมูลบางค่าลงไปใน input text
แล้วกดปุ่ม submit จะได้ผลลัพธ์ประมาณนี้
1 2 3 4 5 6 7 8 | <pre>Array( [mytext1] => ทดสอบ)Array()</pre> |
สังเกตว่าในส่วนของตัวแปร $_FILES จะไม่มีการส่งค่าเข้ามาด้วย จะส่งข้อมูลมาเฉพาะ
ส่วนของตัวแปร $_POST เพราะการใช้งาน method serialize() จะไม่สามารถส่งข้อมูลจาก input file ได้
การส่งข้อมูลด้วย ajax รองรับ การส่งค่า input file
ต่อไปเรามาดูโค้ดตัวอย่างการส่งค่าด้วย ajax โดยใช้งาน FormData Object รองรับการส่งค่า input file
เราจะใช้ไฟล์ show_data.php ทดสอบตัวเดิม
1 2 3 4 5 6 7 8 9 | <?php if(isset($_POST["mytext1"])){ echo "<pre>"; print_r($_POST); print_r($_FILES); echo "</pre>"; exit;}?> |
ไฟล์ form_ajax2.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title></head><body><br /><form action="" method="post" enctype="multipart/form-data" name="myform1" id="myform1"><input type="text" name="mytext1" id="mytext1"><br><input type="file" name="pic_upload" id="pic_upload" /> <input type="submit" name="bt_upload" id="bt_upload" value="Submit" /></form><br><script type="text/javascript">$(function(){ // ส่วนของการกำหนดการตั้งค่าการใช้งาน ajax ของ jquery // เพิ่มเติม https://api.jquery.com/jQuery.ajax/ // กรณีใช้งานอัพโหลดไฟล์ด้วย ajax ต้องกำหนด contentType: false, และ processData: false $.ajaxSetup({ cache: false, contentType: false, processData: false }); // เมื่อฟอร์มการเรียกใช้ evnet submit ข้อมูล $("#myform1").on("submit",function(e){ e.preventDefault(); // ปิดการใช้งาน submit ปกติ เพื่อใช้งานผ่าน ajax // เตรียมข้อมูล form สำหรับส่งด้วย FormData Object var formData = new FormData($(this)[0]); // ส่งค่าแบบ POST ไปยังไฟล์ show_data.php $.post("show_data.php",formData,function(data){ console.log(data); // ทดสอบแสดงค่า ดูผ่านหน้า console/* การใช้งาน console log เพื่อ debug javascript ใน chrome firefox และ ie https://www.ninenik.com/content.php?arti_id=692 via @ninenik */ }); }); });</script></body></html> |
เมื่อเราทดสอบรันโค้ดข้างด้ร โดยเลือกไฟล์ และก็พิมพ์ข้อมูลบางค่าลงไปใน input text
แล้วกดปุ่ม submit จะได้ผลลัพธ์ประมาณนี้
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <pre>Array( [mytext1] => ทดสอบ form object [bt_upload] => Submit)Array( [pic_upload] => Array ( [name] => fullcalendar1.png [type] => image/png [tmp_name] => C:xampptmpphpB569.tmp [error] => 0 [size] => 36874 ))</pre> |
จะเห็นว่าในส่วนนี้ เราสามารถส่งค่า input file ผ่าน ajax ได้
จะมีค่าตัวแปร $_POST และ $_FILES ถูกส่งมาด้วย
ซึ่งการใช้งาน formData Object ผ่าน ajax ของ jquery จำเป็นต้องกำหนดค่าเหล่านี้ก่อนเสมอ
1 2 3 4 5 6 7 8 | // ส่วนของการกำหนดการตั้งค่าการใช้งาน ajax ของ jquery// เพิ่มเติม https://api.jquery.com/jQuery.ajax/// กรณีใช้งานอัพโหลดไฟล์ด้วย ajax ต้องกำหนด contentType: false, และ processData: false$.ajaxSetup({ cache: false, contentType: false, processData: false}); |
หรือกรณีเราใช้รูปแบบ ajax แบบเต็ม ก็สามารถกำหนดเป้นดังนี้ แทนได้ โดยไม่ต้องกำหนด $.ajaxSetup
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title></head><body><br /><form action="" method="post" enctype="multipart/form-data" name="myform1" id="myform1"><input type="text" name="mytext1" id="mytext1"><br><input type="file" name="pic_upload" id="pic_upload" /> <input type="submit" name="bt_upload" id="bt_upload" value="Submit" /></form><br><script type="text/javascript">$(function(){ // เมื่อฟอร์มการเรียกใช้ evnet submit ข้อมูล $("#myform1").on("submit",function(e){ e.preventDefault(); // ปิดการใช้งาน submit ปกติ เพื่อใช้งานผ่าน ajax // เตรียมข้อมูล form สำหรับส่งด้วย FormData Object var formData = new FormData($(this)[0]); // ส่งค่าแบบ POST ไปยังไฟล์ show_data.php รูปแบบ ajax แบบเต็ม $.ajax({ url: 'show_data.php', type: 'POST', data: formData, /*async: false,*/ cache: false, contentType: false, processData: false }).done(function(data){ console.log(data); // ทดสอบแสดงค่า ดูผ่านหน้า console/* การใช้งาน console log เพื่อ debug javascript ใน chrome firefox และ ie https://www.ninenik.com/content.php?arti_id=692 via @ninenik */ }); }); });</script></body></html> |
กรณีที่สองนี้ ได้ผลลัพธ์เช่นเดียวกันกับ การใช้รูปแบบ $.post ของตัวอย่างก่อนหน้า
จากตัวอย่างข้างต้น เราจะเห็นว่า เป็นการใช้งานข้อมูลทั้งหมดที่อยู่ในฟอร์ม เพิ่มสร้าง formData
โดย fomData Object ยังรองรับการเพิ่มค่าข้อมูลจากภายนอกฟอร์มได้ หรือรองรับค่าที่กำหนด
เพิ่มเติมได้ โดยใช้ method ชื่อว่า append()
รูปแบบการใช้งาน
1 | formData.append("ชื่อตัวแปร","ค่าข้อมูล"); |
ตัวอย่าง
1 | formData.append("mytext2","ทดสอบข้อมูลเพิ่มเติม"); |
ตัวอย่างการใช้งาน append() รับค่าข้อมูลนอกฟอร์ม และส่งไปพร้อม formData Object
ไฟล์ form_ajax3.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title></head><body><input type="text" name="mytext2" id="mytext2"><br><br /><form action="" method="post" enctype="multipart/form-data" name="myform1" id="myform1"><input type="text" name="mytext1" id="mytext1"><br><input type="file" name="pic_upload" id="pic_upload" /> <input type="submit" name="bt_upload" id="bt_upload" value="Submit" /></form><br><script type="text/javascript">$(function(){ // ส่วนของการกำหนดการตั้งค่าการใช้งาน ajax ของ jquery // เพิ่มเติม https://api.jquery.com/jQuery.ajax/ // กรณีใช้งานอัพโหลดไฟล์ด้วย ajax ต้องกำหนด contentType: false, และ processData: false $.ajaxSetup({ cache: false, contentType: false, processData: false }); // เมื่อฟอร์มการเรียกใช้ evnet submit ข้อมูล $("#myform1").on("submit",function(e){ e.preventDefault(); // ปิดการใช้งาน submit ปกติ เพื่อใช้งานผ่าน ajax // เตรียมข้อมูล form สำหรับส่งด้วย FormData Object var formData = new FormData($(this)[0]); formData.append("mytext2",$("#mytext2").val()); // เพิ่มค่าจากนอกฟอร์ม // ส่งค่าแบบ POST ไปยังไฟล์ show_data.php รูปแบบ ajax แบบเต็ม $.post("show_data.php",formData,function(data){ console.log(data); // ทดสอบแสดงค่า ดูผ่านหน้า console/* การใช้งาน console log เพื่อ debug javascript ใน chrome firefox และ ie https://www.ninenik.com/content.php?arti_id=692 via @ninenik */ }); }); });</script></body></html> |
ผลล้พธ์
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <pre>Array( [mytext1] => ทดสอบ formData [bt_upload] => Submit [mytext2] => ข้อมูลนอกฟรอ้ม)Array( [pic_upload] => Array ( [name] => fullcalendar1.png [type] => image/png [tmp_name] => C:xampptmpphpCAE1.tmp [error] => 0 [size] => 36874 ))</pre> |
จะเห็นว่ามีส่วนของข้อมูลจากตัวแปร $_POST['mytext2'] ถูกส่งค่าไปด้วย
เท่านี้เราก็สามารถนำไปประยุกต์ใช้งานเพิ่มเติมได้
เนื้อหาที่เกี่ยวข้อง