PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

09 March 2017 By
input file jquery bootstrap อัพโหลด


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


 






Tags:: bootstrap input file อัพโหลด jquery






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


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