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