สวัสดีครับในบทความนี้ผมจะแจกแสดงการทำงานของระบบอัพโหลดไฟล์ แบบอัพโหลดทีละหลายๆ ไฟล์ในครั้งเดียว เหมาะสำหรับนำไปประยุกต์ใช้ทำระบบบริหารสินค้าที่มีการอัพโหลดไฟล์ภาพมากกว่า 1 ไฟล์ ซึ่งรูปแบบ Code จะเป็นแบบ PHP PDO ฐานข้อมูลใช้ MySQL ศึกษาไว้ครับ เผื่อได้ทำ
คลิปแสดงการทำงาน
รวมคลิปสอนทั้งหมด คลิก
รวมคลิปสอนปรับพื้นฐาน ภาษา php ฟรี 100 คลิป ++ https://devbanban.com/?p=3940
โค้ดประกอบด้วย
- PHP PDO
- Try – Catch
- CONDITION
- SQL INSERT
- HTML Form
- Bootstrap5
- Sweet Alert
- Java Script Check file type
มาเริ่มทำ workshop กันครับ *คอมเม้นอยู่ในโค้ด
0.รวม Workshop PHP PDO ก่อนหน้า คลิก
1.สร้างโฟลเดอร์สำหรับทดสอบ เช่น ชื่อโฟลเดอร์ workshop_pdo *สำหรับคนที่เพิ่งฝึกยังไม่เข้าใจข้อนี้ว่าต้องสร้างไว้ที่ไหน ให้ดูคลิปชุดนี้ก่อน รวมคลิปสอนปรับพื้นฐาน ภาษา php ฟรี 100 คลิป ++ https://devbanban.com/?p=3940
2.เมื่อสร้างโฟลเดอร์โปรเจคเสร็จแล้ว ให้สร้างโฟลเดอร์ upload ไว้ภายในด้วยเพื่อเอาไว้เก็บไฟล์ภาพที่อัพโหลดเข้ามา จากนั้นให้สร้างไฟล์ index.html เปล่าๆ ไม่ต้องมี code ไว้ในโฟลเดอร์ upload ด้วย เพื่อป้องกันการเข้าถึงไฟล์ในโฟลเดอร์
3.ตารางเก็บข้อมูล tbl_product_image อยู่ในคลิปสอนชุดนี้ คลิก
1 2 3 4 5 6 7 8 9 10 |
CREATE TABLE `tbl_product_image` ( `no` int(11) NOT NULL, `ref_p_id` int(11) NOT NULL, `product_image` varchar(100) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci; ALTER TABLE `tbl_product_image` ADD PRIMARY KEY (`no`); ALTER TABLE `tbl_product_image` MODIFY `no` int(11) NOT NULL AUTO_INCREMENT; |
4.ไฟล์ workshop และ เชื่อมต่อฐานข้อมูล รวมอยู่ในไฟล์เดียวกัน ชื่อไฟล์ index.php (ถ้ามีไฟล์นี้อยู่แล้วอาจตั้งชื่อเป็น upload.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 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 |
<?php $servername = "localhost"; $username = "root"; $password = "yourpassword"; //ถ้าไม่ได้ตั้งรหัสผ่านให้ลบ yourpassword ออก try { $condb = new PDO("mysql:host=$servername;dbname=db_website;charset=utf8", $username, $password); // set the PDO error mode to exception $condb->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); //echo "Connected successfully"; } catch(PDOException $e) { echo "Connection failed: " . $e->getMessage(); } ?> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>multiple upload </title> <!-- sweet alert --> <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css"> <!-- js check file type --> <script type="text/javascript"> var _validFileExtensions = [".jpg", ".jpeg", ".png"]; //กำหนดนามสกุลไฟล์ที่สามรถอัพโหลดได้ function ValidateTypeFile(oForm) { var arrInputs = oForm.getElementsByTagName("input"); for (var i = 0; i < arrInputs.length; i++) { var oInput = arrInputs[i]; if (oInput.type == "file") { var sFileName = oInput.value; if (sFileName.length > 0) { var blnValid = false; for (var j = 0; j < _validFileExtensions.length; j++) { var sCurExtension = _validFileExtensions[j]; if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) { blnValid = true; break; } // if (sFileName.substr(sFileName.length.... } // for (var j = 0; j < _validFileExtensions.length; j++) { //ถ้าเลือกไฟล์ไม่ถุูกต้องจะมี Alert แจ้งเตือน if (!blnValid) { // alert("คำเตือน , " + sFileName + "\n ระบบรองรับเฉพาะไฟล์นามสกุล : " + _validFileExtensions.join(", ")); setTimeout(function() { swal({ title: "อัพโหลดไฟล์ไม่ถูกต้อง ", text: "รองรับ .jpg, .jpeg, .png เท่านั้น !!", type: "error" }, function() { //window.location.reload(); //window.location = "product.php?act=add"; //หน้าที่ต้องการให้กระโดดไป }); }, 1000); return false; } //if (!blnValid) { } //if (sFileName.length > 0) { } // if (oInput.type == "file") { } //for return true; } //function ValidateTypeFile(oForm) { </script> </head> <body> <h1> Multiple Upload files</h1> <form action="" method="post" onsubmit="return ValidateTypeFile(this);" enctype="multipart/form-data"> <input name="upload[]" type="file" multiple="multiple" required accept="image/*" /> <button type="submit" name="act" value="upload"> upload/อัพโหลดไฟล์ </button> </form> </body> </html> <?php //https://stackoverflow.com/questions/2704314/multiple-file-upload-in-php if (isset($_POST['act']) && $_POST['act']=='upload') { // echo '<pre>'; // print_r($_FILES); // exit(); //$files = array_filter($_FILES['upload']['name']); //something like that to be used before processing files. //trigger exception in a "try" block try { // Count # of uploaded files in array $total = count($_FILES['upload']['name']); //echo $total; //exit(); // Loop through each file for( $i=0 ; $i < $total ; $i++ ) { //สร้างตัวแปรวันที่เพื่อเอาไปตั้งชื่อไฟล์ใหม่ $date1 = date("YmdHis"); //สร้างตัวแปรสุ่มตัวเลขเพื่อเอาไปตั้งชื่อไฟล์ที่อัพโหลดไม่ให้ชื่อไฟล์ซ้ำกัน $numrand = (mt_rand()); $typefile = strrchr($_FILES['upload']['name'][$i],"."); //Get the temp file path $tmpFilePath = $_FILES['upload']['tmp_name'][$i]; //Make sure we have a file path if ($tmpFilePath != ""){ //โฟลเดอร์ที่เก็บไฟล์ $path="uploads/"; //ตั้งชื่อไฟล์ใหม่เป็น สุ่มตัวเลข+วันที่ $newname = $numrand.'_'.$date1.$typefile; $path_copy=$path.$newname; //คัดลอกไฟล์ไปยังโฟลเดอร์ //Upload the file into the temp dir if(move_uploaded_file($_FILES['upload']['tmp_name'][$i],$path_copy)) { $stmtUpload = $condb->prepare("INSERT INTO tbl_product_image ( ref_p_id, product_image ) VALUES ( 1, '$newname' ) "); $stmtUpload->execute(); //$condb = null; //close connect db //echo '<pre>'; //$stmtUpload->debugDumpParams(); //Handle other code here //echo '<pre>'; //print_r($newFilePath); } //if move } // ! impty } //for if($stmtUpload->rowCount() > 0){ echo '<script> setTimeout(function() { swal({ title: "อัพโหลดภาพสำเร็จ", text: "ไฟล์ที่ถูกอัพโหลด '. $total .' files", type: "success" }, function() { window.location = "index.php"; //หน้าที่ต้องการให้กระโดดไป }); }, 1000); </script>'; }//if //catch exception }catch(Exception $e) { //echo 'Message: ' .$e->getMessage(); echo '<script> setTimeout(function() { swal({ title: "เกิดข้อผิดพลาด", text: "กรุณาติดต่อผู้ดูแลระบบ", type: "warning" }, function() { window.location = "index.php"; //หน้าที่ต้องการให้กระโดดไป }); }, 1000); </script>'; } } //isset //https://devbanban.com/ //ระบบที่มีขาย : https://devbanban.com/?p=4425 ?> |
คลิปแสดงการทำงาน
ลองเอาไปประยุกต์ใช้ดูครับ และฝากติดตาม workshop ต่อๆ ไปด้วยครับผม
แหล่งศึกษาเพิ่มเติม : https://websitebeaver.com/php-pdo-vs-mysqli
List of PDOStatement::bindParam data_type parameters : https://www.php.net/manual/en/pdo.constants.php
ระบบพร้อมใช้ทั้งหมด. https://devbanban.com/?p=4425
ร่วมสนับสนุน ค่ากาแฟ ค่าโฮส devbanban.com ได้ที่
ธนาคารกรุงไทย สาขาเดอะมอลล์ท่าพระ
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 878-0-17747-6
————————————————————————————
ธนาคารไทยพาณิชย์ สาขามหาวิทยาลัยราชภัฏธนบุรี
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 406-359094-1
fanpage : https://www.facebook.com/sornwebsites/