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

เขียนเมื่อ 13 ปีก่อน โดย Ninenik Narkdee
ajax iframe อัพโหลดรูป jquery

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

ดูแล้ว 23,338 ครั้ง


โดยทั่วไป 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 เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ











URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ