จัดรูปแบบ input file ด้วย jquery และ bootstrap พร้อมโค้ดอัพโหลด อย่างง่าย

เขียนเมื่อ 3 ปีก่อน โดย Ninenik Narkdee
input file bootstrap อัพโหลด jquery

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ input_file bootstrap อัพโหลด jquery



ตัวอย่างการจัดรูปแบบต่อไปนี้ เป็นการใช้งาน jquery ร่วมกับ bootstrap css ในการเปลี่ยน input file
ให้เป็นปุ่มที่สามารถกดใช้งานได้ง่าย พร้อมเทคนิคเล็กน้อย เช่น เมื่อเลือกไฟล์ แล้วให้แสดงชื่อไฟล์
พร้อมมีปุ่ม ยกเลิกการเลือกไฟล์


 

ดังตัวอย่างการทำงานดังนี้

 

Choose File
Choose File
Choose File



 
 
 

โค้ดตัวอย่างทั้งหมด demo_index.php

 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
     integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</head>
<body>

<style type="text/css">
.mg-top{margin-top:5px;}
.mg-top10{margin-top:10px;}
.btn-upload{
	margin-top:5px;	
}
</style>
<br>
<br>
<div class="container" style="width:600px;">
<form action="" method="post" enctype="multipart/form-data" name="form1">
<?php for($i=1;$i<=3;$i++){?>
  <div class="form-group">
    <label for="photo-up<?=$i?>" class="col-sm-3 control-label mg-top10 text-right">Photo <?=$i?>:</label>
    <div class="col-sm-9">
<!--    เพื่อให้สอดคล้องกับการใช้งาน jquery อย่างน้อยให้ element ทั้งสามอันอยู่ติดกัน -->
	<input type="file" class="form-control file-up" name="photoup[]" id="photo-up<?=$i?>"  style="display:none;">
    <div class="btn btn-sm btn-default btn-upload"> Choose File</div>
    <div class="btn btn-sm btn-danger mg-top btn-remove-file" style="display:none;">X</div>
    
    </div>
  </div>
<?php } ?>  
  <div class="form-group">
    <div class="col-sm-9 col-sm-offset-3">
    <br>
    	<button type="submit" class="btn btn-primary">Send</button>
    </div>
</div>    
</form>
<br style="clear:both;">
<br>
<?php
// มีการเลือกไฟล์สำหรับอัพโหลดอย่างน้อย 1 ไฟล์
if(isset($_FILES['photoup']['name']) && implode("",$_FILES['photoup']['name'])!=""){
	$uploads_dir = 'uploads'; // โฟลเดอร์สำหรับเก็บไฟล์
	$totalFile = count($_FILES['photoup']['name']); // จำนวน input file ทั้งหมด
	for($i = 0; $i < $totalFile; $i++){ // วนลูปจัดการไฟล์แต่ละไฟล์
			$tmpFile = $_FILES['photoup']['tmp_name'][$i];	
			$fileName = $_FILES['photoup']['name'][$i];	 // เก็บชื่อไฟล์
			if($fileName!=""){
					$info = pathinfo($fileName);
					echo "<pre>";
					print_r($info);			// ข้อมูลไฟล์
					echo "</pre>";			
					$ext = $info['extension']; // เก็บค่านามสกุลไฟล์
					$setFileName = time(); // กำหนดชื่อไฟล์ใหม่
					$fileName_new = $setFileName.".".$ext;			
					echo $fileName." --  ".$fileName_new."<br>"; // ชื่อไฟล์ และชื่อไฟล์ใหม่
					if(is_dir($uploads_dir)){
						if(move_uploaded_file($tmpFile, $uploads_dir."/".$fileName_new)){
							echo $fileName_new." uploaded!!<br>"; // ชื่อไฟล์ที่อัพโหลดสำเร็จ
							/////////  เพิ่มคำสั่งอื่นๆ ตามต้องการ
							
							
						}else{  echo "อัพโหลดไฟล์ล้มเหลว "; }
					}else{   echo "ไม่มีโฟลเดอร์นี้ ".$uploads_dir; }
			}
	}
}
?>
</div>





<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
 integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
 crossorigin="anonymous"></script>
<script type="text/javascript">
 $(function(){
	 // เมื่อคลิกที่ปุ่มเลือกไฟล์
	 $(".btn-upload").on("click",function(){
		 // ให้ input file เกิด event click 
		 $(this).prev("input:file").trigger("click");
	 });
	 // ถ้ามีการเปลี่ยนไฟล์ที่อัพโหลด
	 $(".file-up").on("change",function(){
		 var fileLength = $(this)[0].files.length;  // เลือกไฟล์หรือไม่
		 if(fileLength!=0){ // ถ้าเลือกไฟล์
		 	$(this).next(".btn-upload").text($(this).val());
			$(this).nextAll(".btn-remove-file").show();
		 }else{ // ถ้าไม่ได้เลือกไฟล์
			$(this).next(".btn-upload").text("Choose File");
			$(this).nextAll(".btn-remove-file").hide();
		 }
	 });
	 // ถ้าคลิกที่ปุ่มยกเลิกเลือกไฟล์
	 $(".btn-remove-file").on("click",function(){
		var el = $(this).prevAll("input:file");
		el.wrap('<form>').closest('form').get(0).reset();
		el.unwrap();		 
		$(this).prev(".btn-upload").text("Choose File");
		$(this).hide();
	 });
 });
 </script>
</body>
</html>
 
 
ในตัวอย่างเป็นการใช้งาน input file แบบ array มีโค้ดตัวอย่างในการตรวจสอบและอัพโหลดไฟล์
สามารถนำไปประยุกต์ใช้งานเพิ่มเติมได้


 


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ











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











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ