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

15 February 2013 By 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 เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ







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



Tags:: อัพโหลดรูป







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











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