PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

ลูกเล่น เพิ่มช่องรับ input type file อัตโนมัติ ด้วย jQuery

27 June 2011 By


 ตัวอย่างต่อไปนี้ เป็นแนวทางสำหรับนำไปใช้ในการ ให้สามารถอัพโหลดไฟล์ ได้หลายๆ ไฟล์พร้อมกัน

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



 
โค้ดตัวอย่างทั้งหมด
 
<!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:: &nbsp;</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:: &nbsp;</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>
 

Tags:: input type file jquery





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