เทคนิค ประยุกต์ใช้ ajax ใน jQuery ร่วมกับ iframe กับการอัพโหลดรูป

31 July 2010 เขียนเมื่อ 13 ปีก่อน โดย Ninenik Narkdee

iframe ajax jquery อัพโหลดรูป

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ iframe ajax jquery อัพโหลดรูป

โดยทั่วไป 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;
}
?>

ตัวอย่าง
#

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ