PHP 速成课程：简单图片库
功能齐全的图像库，具有使用 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中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
说明PHP中的不同错误类型（注意，警告，致命错误，解析错误）。
Apr 08, 2025 am 12:03 AM
PHP中有四种主要错误类型：1.Notice：最轻微，不会中断程序，如访问未定义变量；2.Warning：比Notice严重，不会终止程序，如包含不存在文件；3.FatalError：最严重，会终止程序，如调用不存在函数；4.ParseError：语法错误，会阻止程序执行，如忘记添加结束标签。
说明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和Python：比较两种流行的编程语言
Apr 14, 2025 am 12:13 AM
PHP和Python各有优势，选择依据项目需求。1.PHP适合web开发，尤其快速开发和维护网站。2.Python适用于数据科学、机器学习和人工智能，语法简洁，适合初学者。
PHP行动：现实世界中的示例和应用程序
Apr 14, 2025 am 12:19 AM
PHP在电子商务、内容管理系统和API开发中广泛应用。1)电子商务：用于购物车功能和支付处理。2)内容管理系统：用于动态内容生成和用户管理。3)API开发：用于RESTfulAPI开发和API安全性。通过性能优化和最佳实践，PHP应用的效率和可维护性得以提升。
什么是HTTP请求方法（获取，发布，放置，删除等），何时应该使用？
Apr 09, 2025 am 12:09 AM
HTTP请求方法包括GET、POST、PUT和DELETE，分别用于获取、提交、更新和删除资源。1.GET方法用于获取资源，适用于读取操作。2.POST方法用于提交数据，常用于创建新资源。3.PUT方法用于更新资源，适用于完整更新。4.DELETE方法用于删除资源，适用于删除操作。
PHP：网络开发的关键语言
Apr 13, 2025 am 12:08 AM
PHP是一种广泛应用于服务器端的脚本语言，特别适合web开发。1.PHP可以嵌入HTML，处理HTTP请求和响应，支持多种数据库。2.PHP用于生成动态网页内容，处理表单数据，访问数据库等，具有强大的社区支持和开源资源。3.PHP是解释型语言，执行过程包括词法分析、语法分析、编译和执行。4.PHP可以与MySQL结合用于用户注册系统等高级应用。5.调试PHP时，可使用error_reporting()和var_dump()等函数。6.优化PHP代码可通过缓存机制、优化数据库查询和使用内置函数。7
解释self ::，parent ::和static :: in php oop中的区别。
Apr 09, 2025 am 12:04 AM
在PHPOOP中，self::引用当前类，parent::引用父类，static::用于晚静态绑定。1.self::用于静态方法和常量调用，但不支持晚静态绑定。2.parent::用于子类调用父类方法，无法访问私有方法。3.static::支持晚静态绑定，适用于继承和多态，但可能影响代码可读性。
PHP如何安全地上载文件？
Apr 10, 2025 am 09:37 AM
PHP通过$\_FILES变量处理文件上传，确保安全性的方法包括：1.检查上传错误，2.验证文件类型和大小，3.防止文件覆盖，4.移动文件到永久存储位置。
