在Web开发中，多图片上传、存储到数据库并在页面动态展示是常见需求，结合PHP和MySQL可以快速实现这一整套流程，下面从前期准备到完整实现逐步说明。
前期准备
数据库表设计
首先需要在MySQL中创建存储图片信息的表，这里不存储图片二进制内容，而是存储图片的保存路径、上传时间等元数据，提升数据库性能。建表语句如下：
CREATE TABLE `image_list` ( `id` int(11) NOT NULL AUTO_INCREMENT, `image_name` varchar(255) NOT NULL COMMENT '原始图片名称', `save_path` varchar(500) NOT NULL COMMENT '服务器保存路径', `upload_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '上传时间', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
目录与权限配置
在服务器根目录下创建uploads文件夹，用于存放上传的图片，确保PHP进程对该目录有读写权限，避免上传时出现权限不足的错误。
前端上传表单实现
前端需要搭建支持多文件选择的表单，同时指定表单编码类型为multipart/form-data，否则无法传输文件数据。表单代码如下：
<form action="upload.php" method="post" enctype="multipart/form-data"> <p>选择要上传的图片（可多选）：</p> <input type="file" name="images[]" multiple accept="image/*"> <p><input type="submit" value="上传图片"></p> </form>
这里name属性设置为images[]，才能让PHP接收到多文件数组，multiple属性开启多选，accept="image/*"限制只能选择图片类型文件。
后端PHP上传处理逻辑
创建upload.php文件，处理上传的文件，包括校验、保存、写入数据库三个核心步骤。
文件校验
首先对上传的文件进行基础校验，包括是否为图片类型、文件大小是否符合要求、是否有上传错误等，校验代码如下：
<?php
// 数据库连接配置
$db_host = '127.0.0.1';
$db_user = 'root';
$db_pass = 'root';
$db_name = 'test';
$conn = new mysqli($db_host, $db_user, $db_pass, $db_name);
if ($conn->connect_error) {
die('数据库连接失败：' . $conn->connect_error);
}
// 检查是否有文件上传
if (!isset($_FILES['images'])) {
die('未检测到上传文件');
}
$images = $_FILES['images'];
$allow_types = ['image/jpeg', 'image/png', 'image/gif'];
$max_size = 2 * 1024 * 1024; // 最大2MB
$upload_dir = __DIR__ . '/uploads/';
$success_count = 0;
$error_msgs = [];
// 遍历所有上传的文件
for ($i = 0; $i < count($images['name']); $i++) {
$file_name = $images['name'][$i];
$file_tmp = $images['tmp_name'][$i];
$file_size = $images['size'][$i];
$file_error = $images['error'][$i];
$file_type = $images['type'][$i];
// 检查上传错误
if ($file_error !== UPLOAD_ERR_OK) {
$error_msgs[] = $file_name . ' 上传失败，错误码：' . $file_error;
continue;
}
// 检查文件类型
if (!in_array($file_type, $allow_types)) {
$error_msgs[] = $file_name . ' 不是允许的图片类型';
continue;
}
// 检查文件大小
if ($file_size > $max_size) {
$error_msgs[] = $file_name . ' 文件大小超过2MB限制';
continue;
}
// 生成唯一保存文件名，避免重复
$file_ext = pathinfo($file_name, PATHINFO_EXTENSION);
$save_name = uniqid() . '_' . time() . '.' . $file_ext;
$save_path = $upload_dir . $save_name;
$db_save_path = 'uploads/' . $save_name; // 存入数据库的相对路径
}
?>文件保存与数据库写入
校验通过后，将文件移动到指定目录，同时将图片信息写入MySQL表，代码如下：
<?php
// 接上面的循环逻辑
if (move_uploaded_file($file_tmp, $save_path)) {
// 写入数据库
$stmt = $conn->prepare("INSERT INTO image_list (image_name, save_path) VALUES (?, ?)");
$stmt->bind_param('ss', $file_name, $db_save_path);
if ($stmt->execute()) {
$success_count++;
} else {
$error_msgs[] = $file_name . ' 数据库写入失败：' . $stmt->error;
// 如果数据库写入失败，删除已经保存的文件
unlink($save_path);
}
$stmt->close();
} else {
$error_msgs[] = $file_name . ' 文件保存失败';
}
}
// 输出处理结果
if ($success_count > 0) {
echo '<p>成功上传 ' . $success_count . ' 张图片</p>';
}
if (!empty($error_msgs)) {
echo '<p>上传失败信息：</p>';
echo '<ul>';
foreach ($error_msgs as $msg) {
echo '<li>' . $msg . '</li>';
}
echo '</ul>';
}
echo '<p><a href="index.html">返回上传页面</a></p>';
echo '<p><a href="show.php">查看已上传图片</a></p>';
$conn->close();
?>动态展示图片列表
创建show.php文件，从MySQL读取图片信息，动态渲染到页面上，代码如下：
<?php
// 数据库连接配置，和上传文件中的配置一致
$db_host = '127.0.0.1';
$db_user = 'root';
$db_pass = 'root';
$db_name = 'test';
$conn = new mysqli($db_host, $db_user, $db_pass, $db_name);
if ($conn->connect_error) {
die('数据库连接失败：' . $conn->connect_error);
}
// 查询所有图片信息
$sql = "SELECT id, image_name, save_path, upload_time FROM image_list ORDER BY upload_time DESC";
$result = $conn->query($sql);
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>已上传图片列表</title>
<style>
.img-list { display: flex; flex-wrap: wrap; gap: 20px; padding: 20px; }
.img-item { width: 200px; border: 1px solid #eee; padding: 10px; text-align: center; }
.img-item img { max-width: 100%; height: 150px; object-fit: cover; }
.img-name { margin: 10px 0; font-size: 14px; color: #333; }
.upload-time { font-size: 12px; color: #999; }
</style>
</head>
<body>
<h2>已上传图片列表</h2>
<p><a href="index.html">返回上传页面</a></p>
<div class="img-list">
<?php
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
echo '<div class="img-item">';
echo '<img src="' . $row['save_path'] . '" alt="' . $row['image_name'] . '">';
echo '<div class="img-name">' . $row['image_name'] . '</div>';
echo '<div class="upload-time">上传时间：' . $row['upload_time'] . '</div>';
echo '</div>';
}
} else {
echo '<p>暂无上传的图片</p>';
}
$conn->close();
?>
</div>
</body>
</html>常见问题与优化建议
- 上传大文件时需要调整
php.ini中的upload_max_filesize和post_max_size配置，避免文件大小限制导致上传失败。 - 可以对上传的图片进行压缩处理，减少存储空间占用，同时提升页面加载速度。
- 生产环境中需要对保存路径做更严格的权限控制，避免恶意文件上传覆盖重要文件。
- 可以对图片展示做分页处理，避免图片数量过多时页面加载缓慢。