เทคนิค ประยุกต์ใช้ ajax ใน jQuery ร่วมกับ iframe กับการอัพโหลดรูป
31 July 2010โดยทั่วไป 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;
}
?>
ตัวอย่าง
http://www.ninenik.com/demo/ajax_jquery_input_file.php
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
11 Jan 12 รู้จัก และใช้งาน DATEDIFF() ใน mysql ฟังก์ชัน เทียบช่วงเวลาที่เหลือ อ่าน 414 19 Jun 10 สร้าง comment ด้วย social plugins ใน facebook api อย่างง่ายดาย อ่าน 17299 02 Apr 09 สร้างรายการตัวเลือกให้กับ input text ด้วย jQuery อย่างง่าย อ่าน 4089 19 Jul 10 การนำ ระบบสมาชิก ของ facebook มาประยุกต์ใช้ อ่าน 5416 18 Mar 09 เพิ่มลดขนาดตัวอักษรในหน้าเว็บแบบง่ายด้วย jQuery อ่าน 3131 22 Mar 09 สร้างฟังก์ชันโชว์รูปภาพขนาดใหญ่ด้วย javascript แบบง่าย อ่าน 4805 02 Jun 10 การหา ขนาด ความกว้าง ความสูงของ รูปภาพ ด้วย javascript อ่าน 2168 09 May 10 ดึงค่า ข้อมูล จาก xml ไฟล์ มากำหนดเป็นตัวแปร array ด้วย php อ่าน 2151 26 Aug 10 ใช้ comments.get เรียกและ บันทึก facebook comment ล่าสุด ลงฐานข้อมูล ด้วย jQuery อ่าน 2379 12 Sep 10 การดึง attribute และค่าต่างๆ จาก xml ไฟล์ด้วย jQuery อย่างง่าย อ่าน 2426 08 Dec 09 แปลง jQuery object เป็น DOM object อ่าน 2476 23 Nov 08 สร้างเมนูแท็บ Tab menu ด้วย jQuery + CSS อย่างง่าย อ่าน 24732 25 Sep 08 ตรวจสอบระดับความปลอดภัยของ รหัสผ่านด้วย Ajax อ่าน 3928 24 Mar 10 เริ่มต้น รู้จัก ก่อนการใช้งาน google map api อ่าน 5374 04 Oct 10 รู้จัก และใช้งาน php sdk สำหรับ facebook เพิ่มขึ้น อ่าน 2856 15 Nov 09 สร้างลิ้งค์เมนู 2 ภาษา กรณี ไทย อังกฤษ ด้วย php อย่างง่าย อ่าน 1864 06 Oct 10 การใช้งาน graph api ของ facebook ด้วย php sdk อ่าน 3703 17 Sep 10 กำหนด infowindow ให้กับตัว marker จำนวนมาก ใน google map อ่าน 2932 17 Nov 08 ตรวจสอบฟอร์ม form ก่อน submit ด้วย jquery อ่าน 9332 16 Aug 10 เทคนิค ใช้ event beforeunload แจ้งเตือนก่อน ปิดบราวเซอร์ ด้วย jQuery อ่าน 1614