สร้างฟังก์ชันสำหรับอัพโหลดรูป แบบกำหนดเงื่อนไข อย่างง่าย

เขียนเมื่อ 7 ปีก่อน โดย Ninenik Narkdee
อัพโหลดรูป

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





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


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







เนื้อหาที่เกี่ยวข้อง









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











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