เนื้อหาต่อไปนี้ จะเป็นตัวอย่างการใช้งานฟังก์ชั่น สำหรับอัพโหลดรูปภาพ
โดยสามารถกำหนด ขนาดไฟล์ว่าไม่เกิน กี่ MB
ตัวอย่าง เช่น ไฟล์ไม่เกิน 1 MB กำหนด 1000000
กำหนดขนาดความกว้าง หรือความสูงของรูปที่อนุญาตให้อัพโหลดได้
ดูรายละเอียดเพิ่มเติมในคำบรรยายในโค้ด
ให้เราสร้างไฟล์ฟังก์ชั่น ตามรูปแบบโค้ด้านล่าง
ไฟล์ uploadphoto_func.php
<?php
function uppic_only($img,$imglocate,$multi=false,$limit_size=2000000,$limit_width=false,$limit_height=false){
$allowed_types=array("jpg","jpeg","gif","png"); // กำหนดนามสกุลของไฟล์ที่อนุญาตให้อัพโหลด
$file_up=NULL; // กำหนดชื่อไฟล์เริ่มต้น เป็น NULL
$i_num = (isset($multi))?count($img['name']):false; // ตรวจสอบว่ามีการอัพทีละหลายๆ ไฟล์หรือไม่
if($img["name"]!="" || @implode("",$img["name"])!=""){ // มีการส่งไฟล์เข้ามาจริง
if($i_num){
$file_up = array();
for($i=0;$i<$i_num;$i++){ // วนลูปกรณีอัพที่ละหลายไฟล์
$fileupload1=$img["tmp_name"][$i]; // ข้อมูลไฟล์อัพโหลด
$data_Img=@getimagesize($fileupload1); // หาความกว้าง ความสูงของรูป
$g_img=explode(".",$img["name"][$i]); // แยกข้อมูลจากชื่อไฟล์ เพื่อหา ชื่อไฟล์ นามสกุลไฟล์
$ext = strtolower(array_pop($g_img)); // แยกนามกุลไฟล์ออกมา แล้วปรับให้เป็นตัวพิมพ์เล็ก
$file_up_arr=time()."-".$i.".".$ext; // กำหนดชื่อไฟล์ใหม่ ในที่นี้จะเป็นในรูปแบบ เช่น 1234556789-1.jpg
$canUpload=0; // กำหนดสถานะอัพโหลดเริ่มต้น
if(isset($data_Img) && $data_Img[0]>0 && $data_Img[1]>0){ // ตรวงสอบว่ามีข้อมูลเกี่ยวกับรูปหรือไม่ เช่น ความกว้าง สูง
if($img["size"][$i]<=$limit_size){ // ขนาดของรูปที่อัพโหลด จะต้องไม่เกิน ค่าที่กำหนด
if($limit_width && $limit_height){ // ถ้ามีการกำหนดให้ตรวจสอบ ขนาดความกว้างและสูง ของรูป
if($data_Img[0]<=$limit_width && $data_Img[1]<=$limit_height){
$canUpload=1;
}
}elseif($limit_width>0 && $limit_height==false){// ถ้ามีการกำหนดให้ตรวจสอบ เฉพาะขนาดความกว้าง ของรูป
if($data_Img[0]<=$limit_width){
$canUpload=1;
}
}elseif($limit_width==false && $limit_height>0){// ถ้ามีการกำหนดให้ตรวจสอบ เฉพาะขนาดความสูง ของรูป
if($data_Img[1]<=$limit_height){
$canUpload=1;
}
}else{ // ไม่มีการรวจสอบเพิ่มเติมใดๆ นอกจากขนาดไฟล์
$canUpload=1;
}
}
}
// เมื่อมีข้อมูลไฟล์ที่อัพโหลด และเป็นไฟล์ที่อนุญาต และสามารถอัพโหลดได้โดยไม่ติดเงื่อนไขใดๆ
if($fileupload1!="" && @in_array($ext,$allowed_types) && $canUpload==1){
// ตรวจสอบว่าเป็นไฟล์อัพโหลด และทำการย้ายไฟล์ไปยัง path ที่กำหนด
if(is_uploaded_file($fileupload1) && @move_uploaded_file($fileupload1,$imglocate.$file_up_arr)){
array_push($file_up,$file_up_arr);
@chmod($imglocate.$file_up_arr,0777); // เปลี่ยน permission ของไฟล์ ส่วนใหย๋ค่ำสั่ง chmod จะใช้ไม่ได้
}
}
}
if(count($file_up)==0){
$file_up=NULL; // อัพโหลดไม่ได้ ให้เป็น NULL
}
}else{
$fileupload1=$img["tmp_name"]; // ข้อมูลไฟล์อัพโหลด
$data_Img=@getimagesize($fileupload1); // หาความกว้าง ความสูงของรูป
$g_img=explode(".",$img["name"]); // แยกข้อมูลจากชื่อไฟล์ เพื่อหา ชื่อไฟล์ นามสกุลไฟล์
$ext = strtolower(array_pop($g_img)); // แยกนามกุลไฟล์ออกมา แล้วปรับให้เป็นตัวพิมพ์เล็ก
$file_up=time().".".$ext; // กำหนดชื่อไฟล์ใหม่ ในที่นี้จะเป็นในรูปแบบ เช่น 1234556789.jpg
$canUpload=0; // กำหนดสถานะอัพโหลดเริ่มต้น
if(isset($data_Img) && $data_Img[0]>0 && $data_Img[1]>0){ // ตรวงสอบว่ามีข้อมูลเกี่ยวกับรูปหรือไม่ เช่น ความกว้าง สูง
if($img["size"]<=$limit_size){ // ขนาดของรูปที่อัพโหลด จะต้องไม่เกิน ค่าที่กำหนด
if($limit_width && $limit_height){ // ถ้ามีการกำหนดให้ตรวจสอบ ขนาดความกว้างและสูง ของรูป
if($data_Img[0]<=$limit_width && $data_Img[1]<=$limit_height){
$canUpload=1;
}
}elseif($limit_width>0 && $limit_height==false){// ถ้ามีการกำหนดให้ตรวจสอบ เฉพาะขนาดความกว้าง ของรูป
if($data_Img[0]<=$limit_width){
$canUpload=1;
}
}elseif($limit_width==false && $limit_height>0){// ถ้ามีการกำหนดให้ตรวจสอบ เฉพาะขนาดความสูง ของรูป
if($data_Img[1]<=$limit_height){
$canUpload=1;
}
}else{ // ไม่มีการรวจสอบเพิ่มเติมใดๆ นอกจากขนาดไฟล์
$canUpload=1;
}
}
}
// เมื่อมีข้อมูลไฟล์ที่อัพโหลด และเป็นไฟล์ที่อนุญาต และสามารถอัพโหลดได้โดยไม่ติดเงื่อนไขใดๆ
if($fileupload1!="" && @in_array($ext,$allowed_types) && $canUpload==1){
// ตรวจสอบว่าเป็นไฟล์อัพโหลด และทำการย้ายไฟล์ไปยัง path ที่กำหนด
if(is_uploaded_file($fileupload1) && @move_uploaded_file($fileupload1,$imglocate.$file_up)){
@chmod($imglocate.$file_up,0777); // เปลี่ยน permission ของไฟล์ ส่วนใหย๋ค่ำสั่ง chmod จะใช้ไม่ได้
}
}else{
$file_up=NULL; // อัพโหลดไม่ได้ ให้เป็น NULL
}
}
}
return $file_up; // ส่งกลับชื่อไฟล์
}
?>
จากนั้น include ฟังก์ชั่น เข้ามาใช้งานในไฟล์ demo.php ดังนี้
<?php
require_once("uploadphoto_func.php");
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
</head>
<body>
<br>
<br>
<div style="width:700px;margin:auto;">
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
<input type="file" name="pic_upload" id="pic_upload" />
<button type="submit" name="bt_upload" id="bt_upload">Submit</button>
</form>
<pre>
<?php
if(isset($_POST["bt_upload"])){
// อัพโหลดรูปในโฟลเดอร์ชื่อ picup
// ตัวอย่างการใช้งานแบบปกติ อัพรูปภาพขนาดไม่เกิน 2 MB
$dataUpPic=uppic_only($_FILES["pic_upload"],"picup/");
if(!is_null($dataUpPic)){ // ถ้ามีชื่อรูป และอัพโหลดสำเร็จ
echo $dataUpPic; // ชื่อไฟล์รูป สามารถเอาไปบันทึกลงฐานข้อมูลได้ ส่วนไฟล์จะอพัไปที่โฟลเดอร์ picup
}
// ตัวอย่างการใช้งานแบบปกติ อัพรูปภาพขนาดไม่เกิน 1 MB กว้างไม่เกิน 700
// $dataUpPic=uppic_only($_FILES["pic_upload"],"picup/",1000000,700);
// ตัวอย่างการใช้งานแบบปกติ อัพรูปภาพขนาดไม่เกิน 1 MB กว้างไม่เกิน 700 สูงไม่เกิน 500
// $dataUpPic=uppic_only($_FILES["pic_upload"],"picup/",1000000,700,500);
// ตัวอย่างการใช้งานแบบปกติ อัพรูปภาพขนาดไม่เกิน 1 MB สูงไม่เกิน 500
// $dataUpPic=uppic_only($_FILES["pic_upload"],"picup/",1000000,0,500);
// echo $dataUpPic; // แสดงชื่อไฟล์รูป
// print_r($dataUpPic);
}
?>
</pre>
</div>
</body>
</html>
ต่อไป สมมติเราอัพโหลดที่ละ หลายๆ รูปโดยใช้ ส่วนอัพโหลดไฟล์ แค่ตัวเดียว โดยเพิ่ม
multiple attribute เข้าไป เป็นดังนี้
<input type="file" name="pic_upload[]" id="pic_upload" multiple />
สังเกตว่า เมื่อเราใช้งาน multiple เพื่อให้สามารถเลือกไฟล์จาก input file หลายๆ ไฟล์ในครั้งเดียวได้
โดยในขั้นตอนการเลือกไฟล์ จะต้องกด ctrl หรือ shift ค้างในขณะเลือกไฟล์ นั้น เราต้องเปลี่ยนชื่อของ
input file ให้เป็นแบบ array โดยจากเดิมเป็น name="pic_upload" เปลี่ยนเป็น name="pic_upload[]"
ทั้งนี้ก็เพื่อให้สามารถอ้างอิงหรือเรียกใช้ค่าของแต่และไฟล์ที่ถูกเลือกได้ หากไม่กำหนดในรูปแบบข้างต้น
ไฟล์ที่เลือก จะถูกส่งไปแค่ไฟล์เดียว ถึงจะเลือกมามากกว่าไฟล์ก็ตาม ตรงนี้ต้องระวัง
โครงสร้างของตัวแปร $_FILES ที่ถูกส่งจาก input file ตัวเดียวที่ใช้งาน multiple จะอยู่ในรูปแบบดังนี้
$_FILES['ชื่อ'][name|type|tmp_name|error|size][0-9]
เข้าใจอย่างง่ายตัวแปร $_FILES จะเป็น array 3 มิติ
มิติแรก เป็นชื่อ input file
มิติที่สอง เป็นฟิลด์ข้อมูลของไฟล์นั้น ชื่องประกอบไปด้วย 4 ค่าดังนี้
- name ชื่อไฟล์ทีอัพโหลด
- type ประเภทของไฟล์ที่อัพโหลด
- tmp_name ข้อมูลของไฟล์ที่จะถูกอัพโหลดไปเก็บ
- error ข้อผิดพลาดในการอัพโหลด ถ้ามี
- size ขนาดของไฟล์หน่วย byte
มิติที่สาม เป็นลำดับ array เป็นแบบ zero base คือเริ่มต้นจาก 0 ไล่ลำดับตัวเลขไปเรื่อย
ตามจำนวนรูป ที่เลือก เช่นเลือก 3 รูป ค่าก็จะเป็น 0,1 และ 2
ยกตัวอย่าง ถ้าเลือก 3 รูป สมมติแสดงเฉพาะ name ก็จะมีชื่อทั้งหมด เป็นดังนี้
$_FILES['pic_upload']['name'][0]; $_FILES['pic_upload']['name'][1]; $_FILES['pic_upload']['name'][2];
ตัวอย่างโค้ดสำหรับอัพโหลดพร้อมกันทีละหลายๆ รูป
<div style="width:700px;margin:auto;">
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
<input type="file" name="pic_upload[]" id="pic_upload" multiple />
<button type="submit" name="bt_upload" id="bt_upload">Submit</button>
</form>
<pre>
<?php
if(isset($_POST["bt_upload"])){
// กรณีอัพโหลดทีละหลายๆ รูป ให้กำหนด true เข้าไป
$dataUpPic=uppic_only($_FILES["pic_upload"],"picup/",true);
if(!is_null($dataUpPic)){ // ถ้ามีชื่อรูป และอัพโหลดสำเร็จ
foreach($dataUpPic as $upload_filename){ // วนลูปแสดงชื่อไฟล์ที่อัพโหลดสำเร็จ
echo $upload_filename; // ชื่อไฟล์ที่อัพโหลดสำเร็จ
}
// print_r($dataUpPic); // ชื่อไฟล์รูป สามารถเอาไปบันทึกลงฐานข้อมูลได้ ส่วนไฟล์จะอพัไปที่โฟลเดอร์ picup
}
}
?>
</pre>
สำหรับรูปแบบฟอร์มสำหรับการอัพโหลดพร้อมกันหลายๆ รูปข้างต้น เป็นการเลือกผ่าน input file เดียวที่มีการ
กำหนดการใช้งาน multiple
ส่วนการเลือกรูปภาพแบบเลือกจากหลายๆ input file ก็สามารถใช้งานได้เหมือนกัน ดังตัวอย่างต่อไปนี้
<div style="width:700px;margin:auto;">
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
<input type="file" name="pic_upload[]" /><br>
<input type="file" name="pic_upload[]" /><br>
<input type="file" name="pic_upload[]" />
<button type="submit" name="bt_upload" id="bt_upload">Submit</button>
</form>
<pre>
<?php
if(isset($_POST["bt_upload"])){
// กรณีอัพโหลดทีละหลายๆ รูป ให้กำหนด true เข้าไป
$dataUpPic=uppic_only($_FILES["pic_upload"],"picup/",true);
if(!is_null($dataUpPic)){ // ถ้ามีชื่อรูป และอัพโหลดสำเร็จ
foreach($dataUpPic as $upload_filename){ // วนลูปแสดงชื่อไฟล์ที่อัพโหลดสำเร็จ
echo $upload_filename; // ชื่อไฟล์ที่อัพโหลดสำเร็จ
}
// print_r($dataUpPic); // ชื่อไฟล์รูป สามารถเอาไปบันทึกลงฐานข้อมูลได้ ส่วนไฟล์จะอพัไปที่โฟลเดอร์ picup
}
}
?>
</pre>
สังเกตว่าในรูปแบบที่สอง เรายังใช้ชื่อ input file ชื่อเดียวกัน และกำหนดในรูปแบบ array
ในการใช้งานการกำหนดค่าอื่น เราก็เปลี่ยนในส่วนของการเรียกใช้ ตามค่าที่ต้องการเช่น
// ตัวอย่างการใช้งานแบบปกติ อัพรูปภาพขนาดไม่เกิน 1 MB กว้างไม่เกิน 700
$dataUpPic=uppic_only($_FILES["pic_upload"],"picup/",false,1000000,700);
// ตัวอย่างการใช้งานแบบปกติ อัพรูปภาพขนาดไม่เกิน 1 MB กว้างไม่เกิน 700 สูงไม่เกิน 500
$dataUpPic=uppic_only($_FILES["pic_upload"],"picup/",false,1000000,700,500);
// ตัวอย่างการใช้งานแบบปกติ อัพรูปภาพขนาดไม่เกิน 1 MB สูงไม่เกิน 500
$dataUpPic=uppic_only($_FILES["pic_upload"],"picup/",false,1000000,false,500);
เท่านี้ ก็สามารถนำไปประยุกต์ใช้งานได้สะดวกยิ่งขึ้น อย่างไรก็ตามรูปแบบข้างต้น
เหมาะสำหรับนำไปใช้ในการอัพโหลดรูปภาพสำหรับเป็น gallery มากกว่า การอัพโหลดพร้อมกับข้อมูล
ที่เชื่อมสัมพันธ์กับในแต่ละรูป