PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

แก้ปัญหา event onchange ของ input type file ไม่ทำงานทันทีใน ใน IE

24 June 2011 By


 event onchange ของ input type file ใน IE เมื่อมีการเลือกไฟล์ที่ต้องการอัพโหลด จะไม่ทำงาน

ทันที ต้องคลิกที่ว่างหรือ focus ออกจาก input type file ก่อน คำสั่งใน event onchange จึงจะทำงาน
แต่กับ บราวเซอร์อื่นๆ จะไม่เจอปัญหานี้ 
 
วิธีการในการแก้ไขคือ ให้ แทรก attribute ชื่อ onpropertychange เข้าไปใน input type file ที่ต้องการ
ให้ทำงานทันทีเมื่อคลิกเลือกไฟล์
 
onpropertychange="if(window.event.propertyName=='value'){$(this).blur();};"
 
ตัวอย่าง
 
<input type="file" name="pic_upload2" class="css_pic_upload2" id="pic_upload2"  />
 
เมื่อแทรกแล้ว จะได้เป็น
 
<input type="file" name="pic_upload2" class="css_pic_upload2" id="pic_upload2" 
onpropertychange="if(window.event.propertyName=='value'){$(this).blur();};"   />
 
ตัวอย่างทดสอบ (ให้ทำการทดสอบรันใน IE จึงจะสามารถเข้าใจผลลัพธ์ได้)
 
ให้ทดสอบโดลการเลือก ไฟล์ใน input type file ตัวที่สองก่อน โดยหลังจากเลือกไฟล์ จะพบว่ามีการ
alert ค่าทันที เนื่องจากเราใช้วิธีการแก้ปัญหาตามคำแนะนำข้างต้น
 
จากนั้น ให้ลองเลือกไฟล์ ใน input type file ตัวแรก โดยหลังเลือกไฟล์ และไม่ได้คลิกที่ว่าง หรือที่อื่นใด
คำสั่ง alert จะไม่ทำงาน จนกระทั้งเรา คลิกที่ว่าง หรือที่อื่นใด คำสั่ง alert จึงจะทำงาน
 



 
 
 
 
ตัวอย่างโค้ดทดสอบทั้งหมด
 
<!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></title>
</head>

<body>

<!--
onpropertychange="if(window.event.propertyName=='value'){$(this).blur();};"

-->
<div style="margin:auto;width:800px;">
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">

<input type="file" name="pic_upload" class="css_pic_upload" id="pic_upload"   />

<br />
<br />

<input type="file" name="pic_upload2" class="css_pic_upload2" id="pic_upload2" 
onpropertychange="if(window.event.propertyName=='value'){$(this).blur();};"   />

</form>

<hr />

</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
	
	$(".css_pic_upload").live("change",function(){
		var file_value=$(this).val();
		alert(file_value);
	});


	$(".css_pic_upload2").live("change",function(){
		var file_value=$(this).val();
		alert(file_value);
	});

});
</script>

</body>
</html>
 
 
 
 
 
 

Tags:: input type file onchange ie





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