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

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

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

ดูแล้ว 14,390 ครั้ง


ตัวอย่างการจัดรูปแบบต่อไปนี้ เป็นการใช้งาน 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 สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







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