แก้ปัญหา event onchange ของ input type file ไม่ทำงานทันทีใน ใน IE
24 June 2011event 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>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
02 Dec 10 แทรก emoticon ด้วย javascript ฟังก์ชัน ให้กับ ckeditor อ่าน 2320 16 Oct 08 CSS กับการตกแต่งกรอบรูปภาพ อ่าน 10702 11 Feb 11 แนะนำ การใช้งาน jQuery quicksearch plugin อ่าน 3090 13 Sep 10 ประยุกต์ สร้างเครื่องมือ ค้นหา พิกัด จากชื่อสถานที่ จำนวนมาก ใน google map อ่าน 1899 15 Mar 11 ทบทวน JavaScript SDK ของ facebook อ่าน 1590 06 Apr 10 ใช้ คุณสมบัติ css stylesheet สร้างตาราง อ่าน 4696 13 Oct 08 คำสั่ง SQL LIKE อ่าน 4599 08 Feb 12 Google map API v.3 กับ jQuery ลากจุดหา ชื่อตำแหน่ง และ พิกัด ค่า latitude longitude อ่าน 322 28 Oct 10 เริ่มต้นใช้งาน jquery ui autocomplete อย่างง่าย อ่าน 3462 17 Jan 11 เทคนิค วิธี การแสดงข้อมูล ด้วยเงื่อนไข วันที่ date ใน mysql อ่าน 3400 14 Feb 09 คำนวณหาอายุ จากวันเกิด ด้วย php อ่าน 4650 25 Mar 11 สร้างรูปแบบ วันที่ คล้าย วันที่ใน facebook comment ด้วย php อย่างง่าย อ่าน 2839 25 Sep 08 มารู้จัก effect ของ jquery อย่างง่าย ตอนที่ 3 อ่าน 3815 26 Mar 09 ฟังก์ชัน php แบ่งหน้าแต่งด้วย css อ่าน 6112 11 May 10 การจัดข้อความ text direction rotation หมุนข้อความ แนวตั้ง ด้วย css ในตาราง อ่าน 3253 30 Oct 08 กำหนดเวลารอดำเนินการ ด้วย javascript อย่างง่าย อ่าน 2768 24 Feb 09 การใช้งาน CSS สำหรับกำหนดตำแหน่งตรึงไว้ชิดขอบล่าง อ่าน 4120 04 Jun 09 สร้างเมนูย่อย ให้กับข้อความ เมื่อนำเม๊าท์ไปชี้ mouseover ด้วย css และ jquery อย่างง่าย อ่าน 7027 19 Mar 11 การสร้างปุ่ม ล็อกอิน เว็บไซต์ แบบไม่แสดงรูป ด้วย facebook อ่าน 1911 19 Nov 10 ทางเลือก อัพโหลดไฟล์ใน ckeditor ด้วย ajax file manager อ่าน 2244