PHP PDO : ตัวอย่างระบบอัพโหลดภาพ, Basic Upload Image

สวัสดีครับ ในบทความนี้จะแจกตัวอย่างโค้ดระบบอัพโหลดภาพแบบง่ายๆ โดยเขียนในรูปแบบ PHP PDO รองรับการทำงาน PHP7 และ PHP8 สำหรับเอาไปศึกษาและพัฒนาต่อยอดครับ *ฝึกไว้ครับเผื่อได้ใช้

รวมคลิปสอนปรับพื้นฐาน ภาษา php ฟรี 100 คลิป ++ https://devbanban.com/?p=3940

โค้ดประกอบด้วย

PHP PDO
MySQL
HTML
Bootstrap5
Sweet Alert

มาเริ่มทำ workshop กันครับ *คอมเม้นอยู่ในโค้ด

0.รวม Workshop PHP PDO ก่อนหน้าคลิก

1.ตารางเก็บข้อมูลตัวอย่างจะชื่อ tbl_uploads ให้สร้างฐานข้อมูลก่อนครับ เช่น ฐานข้อมูลชื่อ workshop_pdo จากนั้นไปที่เมนู sql คัดลอกโค้ดไปวางและ go

CREATE TABLE `tbl_uploads` (
  `no` int(11) NOT NULL,
  `img_name` varchar(100) NOT NULL,
  `img_file` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

ALTER TABLE `tbl_uploads`
  ADD PRIMARY KEY (`no`);

ALTER TABLE `tbl_uploads`
  MODIFY `no` int(11) NOT NULL AUTO_INCREMENT;

CREATE TABLE `tbl_uploads` (

`no` int(11) NOT NULL,

`img_name` varchar(100) NOT NULL,

`img_file` varchar(100) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8;

ALTER TABLE `tbl_uploads`

ADD PRIMARY KEY (`no`);

ALTER TABLE `tbl_uploads`

MODIFY `no` int(11) NOT NULL AUTO_INCREMENT;

2.สร้างโฟลเดอร์สำหรับทดสอบ เช่น ชื่อโฟลเดอร์ workshop_pdo *สำหรับคนที่เพิ่งฝึกยังไม่เข้าใจข้อนี้ว่าต้องสร้างไว้ที่ไหน ให้ดูคลิปชุดนี้ก่อน รวมคลิปสอนปรับพื้นฐาน ภาษา php ฟรี 100 คลิป ++ https://devbanban.com/?p=3940

3.ไฟล์เชื่อมต่อฐานข้อมูล ชื่อไฟล์ connect.php

<?php
$servername = "localhost";
$username = "root";
$password = "yourpassword";

try {
  $conn = new PDO("mysql:host=$servername;dbname=workshop_pdo;charset=utf8", $username, $password);
  // set the PDO error mode to exception
  $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  //echo "Connected successfully";
} catch(PDOException $e) {
  echo "Connection failed: " . $e->getMessage();
}
//Set ว/ด/ป เวลา ให้เป็นของประเทศไทย
    date_default_timezone_set('Asia/Bangkok');
?>

<?php

$servername = "localhost";

$username = "root";

$password = "yourpassword";

try {

$conn = new PDO("mysql:host=$servername;dbname=workshop_pdo;charset=utf8", $username, $password);

// set the PDO error mode to exception

$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

//echo "Connected successfully";

} catch(PDOException $e) {

echo "Connection failed: " . $e->getMessage();

}

//Set ว/ด/ป เวลา ให้เป็นของประเทศไทย

date_default_timezone_set('Asia/Bangkok');

4.สร้างโฟลเดอร์สำหรับเก็บไฟล์ภาพที่อัพโหลด ชื่อ upload (ตั้งตาม code บรรทัด 78)

5.ไฟล์ workshop ตั้งชื่อ upload.php *มีคอมเม้นเพิ่มเติมใน code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
        <title>Basic Upload PHP PDO by devbanban.com 2021</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">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-7"> <br>
                    <h3>PHP PDO Basic Upload Image File</h3>
                    <form action="" method="post" enctype="multipart/form-data">
                        <input type="text" name="img_name" required class="form-control" placeholder="ชื่อภาพ"> <br>
                         <font color="red">*อัพโหลดได้เฉพาะ .jpeg , .jpg , .png </font>
                        <input type="file" name="img_file" required   class="form-control" accept="image/jpeg, image/png, image/jpg"> <br>
                        <button type="submit" class="btn btn-primary">Upload</button>
                    </form>
                    <h3>รายการภาพ </h3>
                    <table class="table table-striped  table-hover table-responsive table-bordered">
                        <thead>
                            <tr>
                                <th width="5%">ลำดับ</th>
                                <th width="65%">ชื่อภาพ</th>
                                <th width="30%">ภาพ</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php
                            //คิวรี่ข้อมูลมาแสดงในตาราง
                            require_once 'connect.php';
                            $stmt = $conn->prepare("SELECT* FROM tbl_uploads");
                            $stmt->execute();
                            $result = $stmt->fetchAll();
                            foreach($result as $k) {
                            ?>
                            <tr>
                                <td><?= $k['no'];?></td>
                                <td><?= $k['img_name'];?></td>
                                <td><img src="upload/<?= $k['img_file'];?>" width="70px"></td>
                            <?php } ?>
                        </tbody>
                    </table>
                    <br>
                    <center>Basic Upload PHP PDO by devbanban.com 2021</center>
                </div>
            </div>
        </div>
    </body>
</html>

<?php 

if (isset($_POST['img_name'])) {
    require_once 'connect.php';
     //สร้างตัวแปรวันที่เพื่อเอาไปตั้งชื่อไฟล์ใหม่
    $date1 = date("Ymd_His");
    //สร้างตัวแปรสุ่มตัวเลขเพื่อเอาไปตั้งชื่อไฟล์ที่อัพโหลดไม่ให้ชื่อไฟล์ซ้ำกัน
    $numrand = (mt_rand());
    $img_file = (isset($_POST['img_file']) ? $_POST['img_file'] : '');
    $upload=$_FILES['img_file']['name'];

    //มีการอัพโหลดไฟล์
    if($upload !='') {
    //ตัดขื่อเอาเฉพาะนามสกุล
    $typefile = strrchr($_FILES['img_file']['name'],".");

    //สร้างเงื่อนไขตรวจสอบนามสกุลของไฟล์ที่อัพโหลดเข้ามา
    if($typefile =='.jpg' || $typefile  =='.jpeg' || $typefile  =='.png'){

    //โฟลเดอร์ที่เก็บไฟล์
    $path="upload/";
    //ตั้งชื่อไฟล์ใหม่เป็น สุ่มตัวเลข+วันที่
    $newname = $numrand.$date1.$typefile;
    $path_copy=$path.$newname;
    //คัดลอกไฟล์ไปยังโฟลเดอร์
    move_uploaded_file($_FILES['img_file']['tmp_name'],$path_copy); 

     //ประกาศตัวแปรรับค่าจากฟอร์ม
    $img_name = $_POST['img_name'];
    
    //sql insert
    $stmt = $conn->prepare("INSERT INTO tbl_uploads (img_name, img_file)
    VALUES (:img_name, '$newname')");
    $stmt->bindParam(':img_name', $img_name, PDO::PARAM_STR);
    $result = $stmt->execute();
    //เงื่อนไขตรวจสอบการเพิ่มข้อมูล
            if($result){
                echo '<script>
                     setTimeout(function() {
                      swal({
                          title: "อัพโหลดภาพสำเร็จ",
                          type: "success"
                      }, function() {
                          window.location = "upload.php"; //หน้าที่ต้องการให้กระโดดไป
                      });
                    }, 1000);
                </script>';
            }else{
               echo '<script>
                     setTimeout(function() {
                      swal({
                          title: "เกิดข้อผิดพลาด",
                          type: "error"
                      }, function() {
                          window.location = "upload.php"; //หน้าที่ต้องการให้กระโดดไป
                      });
                    }, 1000);
                </script>';
            } //else ของ if result

        
        }else{ //ถ้าไฟล์ที่อัพโหลดไม่ตรงตามที่กำหนด
            echo '<script>
                         setTimeout(function() {
                          swal({
                              title: "คุณอัพโหลดไฟล์ไม่ถูกต้อง",
                              type: "error"
                          }, function() {
                              window.location = "upload.php"; //หน้าที่ต้องการให้กระโดดไป
                          });
                        }, 1000);
                    </script>';
        } //else ของเช็คนามสกุลไฟล์
   
    } // if($upload !='') {

    $conn = null; //close connect db
    } //isset
?>

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

<!DOCTYPE html>

<head>

<title>Basic Upload PHP PDO by devbanban.com 2021</title>

</head>

<body>

<h3>PHP PDO Basic Upload Image File</h3>

<font color="red">*อัพโหลดได้เฉพาะ .jpeg , .jpg , .png </font>

<button type="submit" class="btn btn-primary">Upload</button>

</form>

<h3>รายการภาพ </h3>

<thead>

<tr>

<th width="5%">ลำดับ</th>

</tr>

</thead>

<tbody>

<?php

//คิวรี่ข้อมูลมาแสดงในตาราง

require_once 'connect.php';

$stmt = $conn->prepare("SELECT* FROM tbl_uploads");

$stmt->execute();

$result = $stmt->fetchAll();

foreach($result as $k) {

<tr>

<td><img src="upload/<?= $k['img_file'];?>" width="70px"></td>

<?php } ?>

</tbody>

</table>

<br>

<center>Basic Upload PHP PDO by devbanban.com 2021</center>

</div>

</body>

</html>

<?php

if (isset($_POST['img_name'])) {

require_once 'connect.php';

//สร้างตัวแปรวันที่เพื่อเอาไปตั้งชื่อไฟล์ใหม่

$date1 = date("Ymd_His");

//สร้างตัวแปรสุ่มตัวเลขเพื่อเอาไปตั้งชื่อไฟล์ที่อัพโหลดไม่ให้ชื่อไฟล์ซ้ำกัน

$numrand = (mt_rand());

$img_file = (isset($_POST['img_file']) ? $_POST['img_file'] : '');

$upload=$_FILES['img_file']['name'];

//มีการอัพโหลดไฟล์

if($upload !='') {

//ตัดขื่อเอาเฉพาะนามสกุล

$typefile = strrchr($_FILES['img_file']['name'],".");

//สร้างเงื่อนไขตรวจสอบนามสกุลของไฟล์ที่อัพโหลดเข้ามา

if($typefile =='.jpg' || $typefile =='.jpeg' || $typefile =='.png'){

//โฟลเดอร์ที่เก็บไฟล์

$path="upload/";

//ตั้งชื่อไฟล์ใหม่เป็น สุ่มตัวเลข+วันที่

$newname = $numrand.$date1.$typefile;

$path_copy=$path.$newname;

//คัดลอกไฟล์ไปยังโฟลเดอร์

move_uploaded_file($_FILES['img_file']['tmp_name'],$path_copy);

//ประกาศตัวแปรรับค่าจากฟอร์ม

$img_name = $_POST['img_name'];

//sql insert

$stmt = $conn->prepare("INSERT INTO tbl_uploads (img_name, img_file)

VALUES (:img_name, '$newname')");

$stmt->bindParam(':img_name', $img_name, PDO::PARAM_STR);

$result = $stmt->execute();

//เงื่อนไขตรวจสอบการเพิ่มข้อมูล

if($result){

echo '<script>

setTimeout(function() {

swal({

title: "อัพโหลดภาพสำเร็จ",

type: "success"

}, function() {

window.location = "upload.php"; //หน้าที่ต้องการให้กระโดดไป

});

}, 1000);

</script>';

}else{

echo '<script>

setTimeout(function() {

swal({

title: "เกิดข้อผิดพลาด",

type: "error"

}, function() {

window.location = "upload.php"; //หน้าที่ต้องการให้กระโดดไป

});

}, 1000);

</script>';

} //else ของ if result

}else{ //ถ้าไฟล์ที่อัพโหลดไม่ตรงตามที่กำหนด

echo '<script>

setTimeout(function() {

swal({

title: "คุณอัพโหลดไฟล์ไม่ถูกต้อง",

type: "error"

}, function() {

window.location = "upload.php"; //หน้าที่ต้องการให้กระโดดไป

});

}, 1000);

</script>';

} //else ของเช็คนามสกุลไฟล์

} // if($upload !='') {

$conn = null; //close connect db

} //isset

6.ผลลัพธ์การทำงาน

ลองเอาไปประยุกต์ใช้ดูครับ และฝากติดตาม workshop ต่อๆ ไปด้วยครับผม

แหล่งศึกษาเพิ่มเติม : https://websitebeaver.com/php-pdo-vs-mysqli
List of PDOStatement::bindParam data_type parameters : https://www.php.net/manual/en/pdo.constants.php

ขอแนะนำระบบพร้อมใช้งาน *รายละเอียดและราคาอยู่ใต้คลิป

ระบบพร้อมใช้ทั้งหมด คลิก

ร่วมสนับสนุน ค่ากาแฟ ค่าโฮส devbanban.com ได้ที่

ธนาคารกรุงไทย สาขาเดอะมอลล์ท่าพระ
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 878-0-17747-6
————————————————————————————
ธนาคารไทยพาณิชย์ สาขามหาวิทยาลัยราชภัฏธนบุรี
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 406-359094-1

fanpage : https://www.facebook.com/sornwebsites/

devbanban

PHP PDO : ตัวอย่างระบบอัพโหลดภาพ, Basic Upload Image

Byพิศิษฐ์ บวรเลิศสุธี

Related

Related Post

ระบบบริหารบุคลากร ระบบ HR + ระบบบันทึกเวลาเข้างาน

ฟรีคลิปสอนทำเว็บไซต์ PHP PDO MySQL AdminLTE3 2024

ระบบหอพัก , อพาร์ทเม้นท์ รายวัน รายเดือน ราคาเบาๆ เอาไปต่อยอดได้ 2024

You missed

ระบบบริหารบุคลากร ระบบ HR + ระบบบันทึกเวลาเข้างาน

ฟรีคลิปสอนทำเว็บไซต์ PHP PDO MySQL AdminLTE3 2024

ระบบหอพัก , อพาร์ทเม้นท์ รายวัน รายเดือน ราคาเบาๆ เอาไปต่อยอดได้ 2024

แจกฟรี To-do list Ui ออกแบบจาก Bootstrap v5.3

Byพิศิษฐ์ บวรเลิศสุธี

Share this:

Related

Related Post

You missed