ตัวอย่างต่อไปนี้ เป็นแนวทางสำหรับนำไปใช้ในการ ให้สามารถอัพโหลดไฟล์ ได้หลายๆ ไฟล์พร้อมกัน
ในที่นี่ ใช้กับการอัพโหลดรูปภาพ โดยจะมีฟังก์ชั่น ในการอัพโหลด มาในตัวอย่างด้วย
หลักการคือ เมื่อเราเลือกไฟล์ หนึ่งแล้ว เราจะสามารถเลือกไฟล์ที่ต้องการอัพโหลด เพิ่มขึ้นมาเรื่อยๆ
รวมทั้งยังสามารถยกเลิก หรือลบไฟล์ที่ได้ทำการเลือกไปแล้วออก ก่อนทำการอัพโหลด
โค้ดตัวอย่างเฉพาะในส่วนของ 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>
