โดยทั่วไป jQuery จะมี method ที่ชื่อ serialize() สำหรับส่งค่าข้อมูลจากฟอร์มแบบ ajax
ตัวอย่าง
$.post("update.php",$("#form1").serialize());
// จากโค้ดด้านบน เป็นการส่งค่า แบบ post โดยทำการส่งค่าต่างๆ ในฟอร์ม
// ที่มี id ฃื่อ form1 ไปยังไฟล์ update.php ในลักษณะ ajax
แต่ด้วยข้อจำกัดในเรื่องของความปลอดภัย ทำให้ input type='file' หรือ element ประเภท อัพโหลดรูป หรืออัพโหลดไฟล์ ไม่สามารถส่งค่าไปด้วยคำสั่งข้างต้นได้
อย่างไรก็ตาม เราสามารถนำ iframe มาประยุกต์ใช้ ร่วมกับฟังก์ชัน ดังกล่าว ได้ ด้วยแนวทางดังนี้
- เมื่อคลิกที่ปุ่มส่งข้อมูล ให้ทำการอัพโหลดไฟล์รูปภาพ ผ่านการ submit ฟอร์มทั่วไป แต่ให้ยิง target ไปที่ชื่อของ iframe ที่เราตั้งไว้
- และถ้ามีการอัพโหลดรูปภาพ ให้ทำการส่งค่า หรือชื่อรูปภาพที่อัพโหลด กลับมาที่ parent หรือไฟล์หลัก ด้วย javascript ฟ้งก์ชัน
- ใช้ javascript ฟังก์ชัน นั้นนำค่าชื่อรูปภาพที่ได้ ไปกับไว้ในไฟล์ hidden
- จากนั้นเรียกใช้ method ของ jQuery ที่ชื่อ serialize() เพื่อส่งค่าต่างไปยังไฟล์ เพื่อบันทึกลงฐานข้อมูล
ตัวอย่างโค้ดไฟล์ ajax_jquery_input_file.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ajax jquery input file</title>
</head>
<body>
<form action="update_data.php" target="up_iframe" method="post"
enctype="multipart/form-data" name="form1" id="form1">
<input type="text" name="data1" id="data1" />
<br />
<input type="file" name="fileup" id="fileup" value="" />
<input name="h_pic" type="hidden" id="h_pic" value="" />
<br />
<button type="button" id="iSubmit">Submit</button>
</form>
<iframe name="up_iframe" width="0" height="0" frameborder="0"></iframe>
<hr />
<div id="ShowData"></div>
<script language="javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#iSubmit").click(function(){
$("#form1")[0].submit();
});
});
function setVal(dataVar){
$("#h_pic").val(dataVar);
$.post("update_data.php",$("#form1").serialize(),function(gData){
$("#form1")[0].reset();
$("#ShowData").html(gData);
});
}
</script>
</body>
</html>
ตัวอย่างโค้ดไฟล์ update_data.php
<?php
header("Content-type:text/html; charset=UTF-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
function upimg($img,$imglocate){ // ฟังก์ชันสำหรับอัพโหลดรูปภาพอย่างง่าย
global $file_up;
if($img['name']!=''){
$fileupload1=$img['tmp_name'];
$g_img=explode(".",$img['name']);
$file_up=time().".".$g_img[1];
if($fileupload1){
$array_last=explode(".",$file_up);
$c=count($array_last)-1;
$lastname=strtolower($array_last[$c]);
if($lastname=="gif" or $lastname=="jpg" or $lastname=="jpeg" or $lastname=="swf" or $lastname=="png"){
@copy($fileupload1,$imglocate.$file_up);
}
}
}
return $file_up;
}
?>
<?php
if(count($_POST)>0){
echo "<pre>";
print_r($_POST);
echo "<pre>";
echo "<img src='upimg/".$_POST['h_pic']."' width='100' />";
if(count($_FILES)>0){
$upFile=upimg($_FILES['fileup'],"upimg/");
echo "<script>parent.setVal('".$upFile."');</script>";
}
exit;
}
?>
ตัวอย่าง
#
