ลูกเล่น เพิ่มช่องรับ input type file อัตโนมัติ ด้วย jQuery
27 June 2011ตัวอย่างต่อไปนี้ เป็นแนวทางสำหรับนำไปใช้ในการ ให้สามารถอัพโหลดไฟล์ ได้หลายๆ ไฟล์พร้อมกัน
ในที่นี่ ใช้กับการอัพโหลดรูปภาพ โดยจะมีฟังก์ชั่น ในการอัพโหลด มาในตัวอย่างด้วย
หลักการคือ เมื่อเราเลือกไฟล์ หนึ่งแล้ว เราจะสามารถเลือกไฟล์ที่ต้องการอัพโหลด เพิ่มขึ้นมาเรื่อยๆ
รวมทั้งยังสามารถยกเลิก หรือลบไฟล์ที่ได้ทำการเลือกไปแล้วออก ก่อนทำการอัพโหลด
โค้ดตัวอย่างเฉพาะในส่วนของ jQuery
<div style="margin:auto;width:800px;">
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
<table width="500" border="0" cellspacing="2" cellpadding="0">
<tr class="css_row_upload">
<td width="150" align="right" bgcolor="#ECECEC">Picture:: </td>
<td bgcolor="#ECECEC">
<input type="file" name="pic_upload[]" class="css_pic_upload" id="pic_upload[]"
onpropertychange="if(window.event.propertyName=='value'){$(this).blur();};" />
</td>
</tr>
</table>
<br />
<br />
<input type="submit" name="upPic" id="upPic" value="UPLOAD NOW" />
</form>
<hr />
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
var empty_upload='\
<tr class="css_row_upload">\
<td width="150" align="right" bgcolor="#ECECEC">Picture:: </td>\
<td bgcolor="#ECECEC">\
<input type="file" name="pic_upload[]" class="css_pic_upload"\
id="pic_upload[]" onpropertychange="if(window.event.propertyName==\'value\'){$(this).blur();};" />\
<a href="#" class="css_remove_fileupload">Remove</a>\
</td>\
</tr>\
';
$(".css_pic_upload").live("change onpropertychange",function(){
var file_value=$(this).val();
console.log(file_value);
if(file_value!=""){
$(this).parents("tr.css_row_upload").after(empty_upload);
}
});
$(".css_remove_fileupload").live("click",function(e){
e.preventDefault();
$(this).parents("tr.css_row_upload").remove();
});
});
</script>
ตัวอย่าง
โค้ดตัวอย่างทั้งหมด
<!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>
<br />
<br />
<br />
<div style="margin:auto;width:800px;">
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
<table width="500" border="0" cellspacing="2" cellpadding="0">
<tr class="css_row_upload">
<td width="150" align="right" bgcolor="#ECECEC">Picture:: </td>
<td bgcolor="#ECECEC">
<input type="file" name="pic_upload[]" class="css_pic_upload" id="pic_upload[]"
onpropertychange="if(window.event.propertyName=='value'){$(this).blur();};" />
</td>
</tr>
</table>
<br />
<br />
<input type="submit" name="upPic" id="upPic" value="UPLOAD NOW" />
</form>
<hr />
</div>
<?php
function multiupload($img,$imglocate,$key){
$allowed_types=array('jpg','jpeg','gif','png','swf');
if($img['name'][$key]!=''){
$fileupload1=$img['tmp_name'][$key];
$g_img=explode(".",$img['name'][$key]);
$ext = strtolower(array_pop($g_img));
$file_up=time()."-".$key.".".$ext;
echo $file_up;
if($fileupload1!="" && in_array($ext,$allowed_types)){
copy($fileupload1,$imglocate.$file_up);
chmod($imglocate.$file_up,0777);
}
}
return $file_up; // ส่งกลับชื่อไฟล์
}
if(isset($_POST['upPic'])){
$multiupload_pic=$_FILES['pic_upload'];
$arr_multiupload_pic=$multiupload_pic['name'];
if(count($arr_multiupload_pic)>0){
foreach($arr_multiupload_pic as $key=>$value){
$file_to_up=multiupload($multiupload_pic,"tmp_pic/",$key);
if($file_to_up!=""){
echo "$file_to_up<br>";
// นำตัวแปรชื่อไฟล์ไปบันทึกลงฐานข้อมูล หรืออื่นๆ
}
}
}
}
?>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
var empty_upload='\
<tr class="css_row_upload">\
<td width="150" align="right" bgcolor="#ECECEC">Picture:: </td>\
<td bgcolor="#ECECEC">\
<input type="file" name="pic_upload[]" class="css_pic_upload"\
id="pic_upload[]" onpropertychange="if(window.event.propertyName==\'value\'){$(this).blur();};" />\
<a href="#" class="css_remove_fileupload">Remove</a>\
</td>\
</tr>\
';
$(".css_pic_upload").live("change onpropertychange",function(){
var file_value=$(this).val();
console.log(file_value);
if(file_value!=""){
$(this).parents("tr.css_row_upload").after(empty_upload);
}
});
$(".css_remove_fileupload").live("click",function(e){
e.preventDefault();
$(this).parents("tr.css_row_upload").remove();
});
});
</script>
</body>
</html>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
24 Mar 10 เริ่มต้น รู้จัก ก่อนการใช้งาน google map api อ่าน 5569 05 Jul 10 ทบทวน วันที่ date object ใน javascript อ่าน 2831 05 Nov 10 แนวทาง ประยุกต์ กำหนด event ให้กับ jQuery UI datepicker อ่าน 2450 06 Jan 09 บวกวันใน javascript ด้วยฟังก์ชัน day add อย่างง่าย อ่าน 3915 30 Oct 09 ฟังก์ชัน PHP แปลงตัวเลขอาราบิก เป็น ตัวเลขไทย อย่างง่าย อ่าน 1217 11 Dec 09 ทบทวน การเรียกใช้งาน events ใน javascript ที่ใช้ได้สำหรับ ทุก browsers อ่าน 2254 13 Jul 10 วิธี load xml ไฟล์ และ แบ่งหน้า ด้วย php อย่างง่าย อ่าน 2921 04 Jan 10 ดึงไฟล์ xml (rss) ไฟล์แบบ cross domain มาแสดงด้วย ajax ใน jQuery อย่างง่าย อ่าน 3700 22 Mar 11 การกำหนด แท็ก html ในตัวแปร JavaScript อย่างง่าย อ่าน 1623 15 Mar 11 ทบทวน JavaScript SDK ของ facebook อ่าน 1590 08 Oct 08 คำสั่ง SQL DISTINCT อ่าน 4956 26 Mar 09 ฟังก์ชัน php แบ่งหน้าแต่งด้วย css อ่าน 6112 11 Oct 10 แสดงการแบ่งหน้า แบบ ajax ด้วย jQuery php และ css อ่าน 6127 09 Dec 09 การรวมไฟล์ javascript หรือไฟล์ css เป็นไฟล์เดียว ด้วย php อย่างง่าย อ่าน 1852 04 Nov 09 ประยุกต์สร้าง pdf ไฟล์ จาก tcpdf class ด้วย php รองรับภาษาไทย อ่าน 5408 28 Oct 10 เริ่มต้นใช้งาน jquery ui autocomplete อย่างง่าย อ่าน 3462 26 Dec 10 แนะนำ PHP Simple HTML DOM Parser สำหรับ ดึงข้อมูล เฉพาะส่วนที่ต้องการ อ่าน 2917 21 Apr 10 สร้างเส้นทาง เพื่อ หาระยะทาง ใน google map ด้วย jQuery อ่าน 7528 25 Sep 08 ตรวจสอบนามสกุลไฟล์ ก่อนทำการอัพโหลด อ่าน 3333 09 Oct 10 สร้าง album และ อัพโหลด รูป photo ขึ้น facebook ด้วย php sdk อ่าน 3587