PHP 速成課程：簡單圖片庫-php教程-PHP中文網

首頁

後端開發

php教程

PHP 速成課程：簡單圖片庫

王林

Aug 05, 2024 pm 10:08 PM

PHP crash course: Simple Image Gallery

功能齊全的映像庫，具有使用 PHP、HTML、jQuery、AJAX、JSON、Bootstrap、CSS 和 MySQL 上傳功能。該專案包含詳細的分步解決方案以及程式碼解釋和文檔，使其成為一個全面的學習教程。

主題：php、mysql、部落格、ajax、bootstrap、jquery、css、圖片庫、檔案上傳

逐步解決方案

1. 目錄結構

simple-image-gallery/
│
├── index.html
├── db/
│   └── database.sql
├── src/
│   ├── fetch-image.php
│   └── upload.php
├── include/
│   ├── config.sample.php
│   └── db.php
├── assets/
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── script.js
│   └── uploads/
│   │   └── (uploaded images will be stored here)
├── README.md
└── .gitignore

登入後複製

2. 資料庫架構

db/database.sql:

CREATE TABLE IF NOT EXISTS `images` (
    `id` int(11) NOT NULL AUTO_INCREMENT,
    `file_name` varchar(255) NOT NULL,
    `uploaded_on` datetime NOT NULL,
    PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

登入後複製

3. 設定檔

設定設定（include/config.sample.php）

<?php
define('DB_HOST', 'localhost'); // Database host
define('DB_NAME', 'image_gallery'); // Database name
define('DB_USER', 'root'); // Change if necessary
define('DB_PASS', ''); // Change if necessary
define('UPLOAD_DIRECTORY', '/assets/uploads/'); // Change if necessary
?>

登入後複製

4. 設定資料庫連線

建立資料庫連線（include/db.php）

<?php
include 'config.php';

// Database configuration
$dsn = 'mysql:host='.DB_HOST.';dbname='.DB_NAME;
$options = [
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
];

// Create a new PDO instance
try {
    $pdo = new PDO($dsn, DB_USER, DB_PASS, $options);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); // Set error mode to exception
} catch (PDOException $e) {
    echo 'Connection failed: ' . $e->getMessage(); // Display error message if connection fails
}
?>

登入後複製

5. HTML 和 PHP 結構

HTML 結構 (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Gallery Upload</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<div class="container">
    <h1 class="text-center mt-5">Image Gallery</h1>
    <div class="row">
        <div class="col-md-6 offset-md-3">
            <form id="uploadImage" enctype="multipart/form-data">
                <div class="form-group">
                    <label for="image">Choose Image</label>
                    <input type="file" name="image" id="image" class="form-control" required>
                </div>
                <button type="submit" class="btn btn-primary">Upload</button>
            </form>
            <div id="upload-status"></div>
        </div>
    </div>
    <hr>
    <div class="row" id="gallery">
        <!-- Images will be loaded here -->
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="assets/js/script.js"></script> <!-- Custom JS -->
</body>
</html>

登入後複製

6. JavaScript 和 AJAX

AJAX 處理 (assets/js/script.js)

$(document).ready(function(){
    // load gallery on page load
    loadGallery();

    // Form submission for image upload
    $('#uploadImage').on('submit', function(e){
        e.preventDefault(); // Prevent default form submission
        var file_data = $('#image').prop('files')[0];
        var form_data = new FormData();
        form_data.append('file', file_data);
        //hide upload section
        $('#uploadImage').hide();
        $.ajax({
            url: 'src/upload.php', // PHP script to process upload
            type: 'POST',
            dataType: 'text', // what to expect back from the server
            cache: false,
            data: new FormData(this), // Form data for upload
            processData: false,
            contentType: false,
            success: function(response){
                let jsonData = JSON.parse(response);
                if(jsonData.status == 1){
                    $('#image').val(''); // Clear the file input
                    loadGallery(); // Fetch and display updated images
                    $('#upload-status').html('<div class="alert alert-success">'+jsonData.message+'</div>');
                } else {
                    $('#upload-status').html('<div class="alert alert-success">'+jsonData.message+'</div>'); // Display error message
                }
                // hide message box
                autoHide('#upload-status');
                //show upload section
                autoShow('#uploadImage');
            }
        });
    });
});

// Function to load the gallery from server
function loadGallery() {
    $.ajax({
        url: 'src/fetch-images.php', // PHP script to fetch images
        type: 'GET',
        success: function(response){
            let jsonData = JSON.parse(response);
            $('#gallery').html(''); // Clear previous images
            if(jsonData.status == 1){
                $.each(jsonData.data, function(index, image){
                    $('#gallery').append('<div class="col-md-3"><img src="assets/uploads/'+image.file_name+'" class="img-responsive img-thumbnail"></div>'); // Display each image
                });
            } else {
                $('#gallery').html('<p>No images found...</p>'); // No images found message
            }
        }
    });
}

//Auto Hide Div
function autoHide(idORClass) {
    setTimeout(function () {
        $(idORClass).fadeOut('fast');
    }, 1000);
}

//Auto Show Element
function autoShow(idORClass) {
    setTimeout(function () {
        $(idORClass).fadeIn('fast');
    }, 1000);
}

登入後複製

7. 後端 PHP 腳本

取得影像 (src/fetch-images.php)

<?php
include '../include/db.php'; // Include database configuration

$response = array('status' => 0, 'message' => 'No images found.');

// Fetching images from the database
$query = $pdo->prepare("SELECT * FROM images ORDER BY uploaded_on DESC");
$query->execute();
$images = $query->fetchAll(PDO::FETCH_ASSOC);

if(count($images) > 0){
    $response['status'] = 1;
    $response['data'] = $images; // Returning images data
}

// Return response
echo json_encode($response);
?>
?>

登入後複製

圖片上傳 (src/upload.php)

<?php
include '../include/db.php'; // Include database configuration
$response = array('status' => 0, 'message' => 'Form submission failed, please try again.');

if(isset($_FILES['image']['name'])){
    // Directory where files will be uploaded
    $targetDir = UPLOAD_DIRECTORY;
    $fileName = date('Ymd').'-'.str_replace(' ', '-', basename($_FILES['image']['name']));
    $targetFilePath = $targetDir . $fileName;
    $fileType = pathinfo($targetFilePath, PATHINFO_EXTENSION);

    // Allowed file types
    $allowTypes = array('jpg','png','jpeg','gif');
    if(in_array($fileType, $allowTypes)){
        // Upload file to server
        if(move_uploaded_file($_FILES['image']['tmp_name'], $targetFilePath)){
            // Insert file name into database
            $insert = $pdo->prepare("INSERT INTO images (file_name, uploaded_on) VALUES (:file_name, NOW())");
            $insert->bindParam(':file_name', $fileName);
            $insert->execute();
            if($insert){
                $response['status'] = 1;
                $response['message'] = 'Image uploaded successfully!';
            }else{
                $response['message'] = 'Image upload failed, please try again.';
            }
        }else{
            $response['message'] = 'Sorry, there was an error uploading your file.';
        }
    }else{
        $response['message'] = 'Sorry, only JPG, JPEG, PNG, & GIF files are allowed to upload.';
    }
}

// Return response
echo json_encode($response);
?>

登入後複製

6.CSS樣式

CSS 樣式 (assets/css/style.css)

body {
    background-color: #f8f9fa;
}

#gallery .col-md-4 {
    margin-bottom: 20px;
}

#gallery img {
    display: block;
    width: 200px;
    height: auto;
    margin: 10px;
}

登入後複製

文件和評論

config.php：包含資料庫配置並使用PDO連接到MySQL。
index.php：具有 HTML 結構的主頁，包括用於樣式設定的 Bootstrap 以及用於新增/編輯貼文的模式。
assets/js/script.js: 處理載入和儲存貼文的 AJAX 請求。使用 jQuery 進行 DOM 運算和 AJAX。
src/fetch-images.php: 從資料庫中取得貼文並將其作為 JSON 傳回。
src/upload.php： 根據 ID 的存在處理貼文建立和更新。

此解決方案包括設定項目、資料庫配置、HTML 結構、CSS 樣式、使用 AJAX 處理圖像上傳以及使用 PHP PDO 將圖像資料儲存在資料庫中。每行程式碼都附有註解來解釋其目的和功能，使其成為建立具有上傳功能的圖片庫的綜合教學。

連結連結

如果您發現本系列有幫助，請考慮在 GitHub 上給 存儲庫 一個星號或在您最喜歡的社交網絡上分享該帖子？。您的支持對我來說意義重大！

如果您想要更多類似的有用內容，請隨時關注我：

領英
GitHub

原始碼

以上是PHP 速成課程：簡單圖片庫的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1677

CakePHP 教程

1430

Laravel 教程

1333

PHP教程

1278

C# 教程

1257

Related knowledge

說明PHP中的安全密碼散列（例如，password_hash，password_verify）。為什麼不使用MD5或SHA1？ Apr 17, 2025 am 12:06 AM

在PHP中，應使用password_hash和password_verify函數實現安全的密碼哈希處理，不應使用MD5或SHA1。1)password_hash生成包含鹽值的哈希，增強安全性。 2)password_verify驗證密碼，通過比較哈希值確保安全。 3)MD5和SHA1易受攻擊且缺乏鹽值，不適合現代密碼安全。

PHP類型提示如何起作用，包括標量類型，返回類型，聯合類型和無效類型？ Apr 17, 2025 am 12:25 AM

PHP類型提示提升代碼質量和可讀性。 1)標量類型提示：自PHP7.0起，允許在函數參數中指定基本數據類型，如int、float等。 2)返回類型提示：確保函數返回值類型的一致性。 3)聯合類型提示：自PHP8.0起，允許在函數參數或返回值中指定多個類型。 4)可空類型提示：允許包含null值，處理可能返回空值的函數。

PHP和Python：解釋了不同的範例 Apr 18, 2025 am 12:26 AM

PHP主要是過程式編程，但也支持面向對象編程（OOP）；Python支持多種範式，包括OOP、函數式和過程式編程。 PHP適合web開發，Python適用於多種應用，如數據分析和機器學習。

在PHP和Python之間進行選擇：指南 Apr 18, 2025 am 12:24 AM

PHP適合網頁開發和快速原型開發，Python適用於數據科學和機器學習。 1.PHP用於動態網頁開發，語法簡單，適合快速開發。 2.Python語法簡潔，適用於多領域，庫生態系統強大。

PHP和Python：深入了解他們的歷史 Apr 18, 2025 am 12:25 AM

PHP起源於1994年，由RasmusLerdorf開發，最初用於跟踪網站訪問者，逐漸演變為服務器端腳本語言，廣泛應用於網頁開發。 Python由GuidovanRossum於1980年代末開發，1991年首次發布，強調代碼可讀性和簡潔性，適用於科學計算、數據分析等領域。

為什麼要使用PHP？解釋的優點和好處 Apr 16, 2025 am 12:16 AM

PHP的核心優勢包括易於學習、強大的web開發支持、豐富的庫和框架、高性能和可擴展性、跨平台兼容性以及成本效益高。 1)易於學習和使用，適合初學者；2)與web服務器集成好，支持多種數據庫；3)擁有如Laravel等強大框架；4)通過優化可實現高性能；5)支持多種操作系統；6)開源，降低開發成本。

PHP和框架：現代化語言 Apr 18, 2025 am 12:14 AM

PHP在現代化進程中仍然重要，因為它支持大量網站和應用，並通過框架適應開發需求。 1.PHP7提升了性能並引入了新功能。 2.現代框架如Laravel、Symfony和CodeIgniter簡化開發，提高代碼質量。 3.性能優化和最佳實踐進一步提升應用效率。

PHP的影響：網絡開發及以後 Apr 18, 2025 am 12:10 AM

PHPhassignificantlyimpactedwebdevelopmentandextendsbeyondit.1)ItpowersmajorplatformslikeWordPressandexcelsindatabaseinteractions.2)PHP'sadaptabilityallowsittoscaleforlargeapplicationsusingframeworkslikeLaravel.3)Beyondweb,PHPisusedincommand-linescrip

See all articles

PHP 速成課程：簡單圖片庫

逐步解決方案

1. 目錄結構

2. 資料庫架構

3. 設定檔

4. 設定資料庫連線

5. HTML 和 PHP 結構

6. JavaScript 和 AJAX

7. 後端 PHP 腳本

6.CSS樣式

文件和評論

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題