เนื้อหาต่อไปนี้ เป็นบันทึกช่วยจำ เกี่ยวกับการประยุกต์ใช้งาน FormData Object จะสามารถใช้งาน
ได้เฉพาะในบราวเซอร์รุ่นใหม่ๆ เท่านั้น ดูบราวเซอร์ที่สนับสนุนการใช้งาน MLHttpRequest Level 2
รองรับ FormData Object ได้ที่
โดยส่วนใหญ่รองรับการใช้งานแล้ว
ก่อนอื่นมาทบทวนรูปแบบการส่งข้อมูลด้วย ajax แบบเดิม ที่ไม่รองรับ การส่ง input file
การส่งข้อมูลด้วย ajax ที่ไม่รองรับ การส่งค่า input file
ไฟล์ show_data.php สำหรับรับค่าข้อมูลที่ส่งผ่าน ajax (ในที่นี้จะแสดงข้อมูลที่ส่งมาเป็นตัวอย่างเท่านั้น)
<?php
if(isset($_POST["mytext1"])){
echo "<pre>";
print_r($_POST);
print_r($_FILES);
echo "</pre>";
exit;
}
?>
ไฟล์ form_ajax1.php การส่งข้อมูลด้วย ajax
<!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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<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 จะได้ผลลัพธ์ประมาณนี้
<pre>Array
(
[mytext1] => ทดสอบ
)
Array
(
)
</pre>
สังเกตว่าในส่วนของตัวแปร $_FILES จะไม่มีการส่งค่าเข้ามาด้วย จะส่งข้อมูลมาเฉพาะ
ส่วนของตัวแปร $_POST เพราะการใช้งาน method serialize() จะไม่สามารถส่งข้อมูลจาก input file ได้
การส่งข้อมูลด้วย ajax รองรับ การส่งค่า input file
ต่อไปเรามาดูโค้ดตัวอย่างการส่งค่าด้วย ajax โดยใช้งาน FormData Object รองรับการส่งค่า input file
เราจะใช้ไฟล์ show_data.php ทดสอบตัวเดิม
<?php
if(isset($_POST["mytext1"])){
echo "<pre>";
print_r($_POST);
print_r($_FILES);
echo "</pre>";
exit;
}
?>
ไฟล์ form_ajax2.php
<!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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<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 จะได้ผลลัพธ์ประมาณนี้
<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 จำเป็นต้องกำหนดค่าเหล่านี้ก่อนเสมอ
// ส่วนของการกำหนดการตั้งค่าการใช้งาน ajax ของ jquery
// เพิ่มเติม https://api.jquery.com/jQuery.ajax/
// กรณีใช้งานอัพโหลดไฟล์ด้วย ajax ต้องกำหนด contentType: false, และ processData: false
$.ajaxSetup({
cache: false,
contentType: false,
processData: false
});
หรือกรณีเราใช้รูปแบบ ajax แบบเต็ม ก็สามารถกำหนดเป้นดังนี้ แทนได้ โดยไม่ต้องกำหนด $.ajaxSetup
<!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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<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()
รูปแบบการใช้งาน
formData.append("ชื่อตัวแปร","ค่าข้อมูล");
ตัวอย่าง
formData.append("mytext2","ทดสอบข้อมูลเพิ่มเติม");
ตัวอย่างการใช้งาน append() รับค่าข้อมูลนอกฟอร์ม และส่งไปพร้อม formData Object
ไฟล์ form_ajax3.php
<!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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<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>
ผลล้พธ์
<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'] ถูกส่งค่าไปด้วย
เท่านี้เราก็สามารถนำไปประยุกต์ใช้งานเพิ่มเติมได้
เนื้อหาที่เกี่ยวข้อง