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