เนื้อหาต่อไปนี้ จะเป็นตัวอย่างการใช้งานฟังก์ชั่น สำหรับอัพโหลดรูปภาพ
โดยสามารถกำหนด ขนาดไฟล์ว่าไม่เกิน กี่ MB
ตัวอย่าง เช่น ไฟล์ไม่เกิน 1 MB กำหนด 1000000
กำหนดขนาดความกว้าง หรือความสูงของรูปที่อนุญาตให้อัพโหลดได้
ดูรายละเอียดเพิ่มเติมในคำบรรยายในโค้ด
ให้เราสร้างไฟล์ฟังก์ชั่น ตามรูปแบบโค้ด้านล่าง
ไฟล์ uploadphoto_func.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | <?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 ดังนี้
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <?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> </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 เข้าไป เป็นดังนี้
1 | <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];
ตัวอย่างโค้ดสำหรับอัพโหลดพร้อมกันทีละหลายๆ รูป
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <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 ก็สามารถใช้งานได้เหมือนกัน ดังตัวอย่างต่อไปนี้
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <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 2 3 4 5 6 7 8 | // ตัวอย่างการใช้งานแบบปกติ อัพรูปภาพขนาดไม่เกิน 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 มากกว่า การอัพโหลดพร้อมกับข้อมูล
ที่เชื่อมสัมพันธ์กับในแต่ละรูป