
在现代web应用中,文件上传是一个常见而重要的功能。本教程将引导您完成一个场景,即在一个表单中同时上传一张专辑封面图片和多张专辑照片。我们将使用html构建表单,php处理服务器端逻辑,并通过pdo安全地将文件信息存储到mysql数据库。
要实现文件上传功能,HTML表单需要正确配置。关键在于使用 enctype="multipart/form-data" 属性,它告诉浏览器表单数据中包含二进制文件。对于多文件上传,input type="file" 元素还需要添加 multiple 属性,并且其 name 属性应以 [] 结尾,以便PHP将其识别为数组。
以下是实现单封面和多图上传的HTML表单示例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>专辑上传</title>
<style>
body { font-family: Arial, sans-serif; background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }
form {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
gap: 15px;
padding: 30px;
width: 400px;
max-width: 90%;
}
form label {
font-weight: bold;
color: #333;
}
form input[type="text"],
form input[type="file"] {
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1em;
width: 100%;
box-sizing: border-box; /* 确保内边距和边框不增加元素总宽度 */
}
form input[type="file"] {
background-color: #f9f9f9;
}
form button {
background-color: #007bff;
color: #fff;
border: none;
padding: 12px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 1.1em;
transition: background-color 0.3s ease;
}
form button:hover {
background-color: #0056b3;
}
.message {
margin-top: 20px;
padding: 10px;
border-radius: 4px;
text-align: center;
}
.message.success {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.message.error {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
</style>
</head>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
<label for="album_name">专辑名称:</label>
<input type="text" id="album_name" name="album_name" placeholder="请输入专辑名称" required>
<label for="cover_image">选择专辑封面:</label>
<input type="file" id="cover_image" name="cover_image" accept="image/*" required>
<label for="photos">选择多张照片:</label>
<input type="file" id="photos" name="photos[]" multiple accept="image/*">
<button type="submit">上传专辑</button>
</form>
</body>
</html>在上述HTML中:
后端PHP脚本 upload.php 将负责接收上传的文件,将它们移动到服务器上的指定目录,并将文件路径及专辑信息存储到MySQL数据库。我们将使用PDO进行数据库操作,以提高安全性和灵活性。
立即学习“PHP免费学习笔记(深入)”;
数据库结构示例: 为了存储专辑信息和其关联的照片,我们可以创建两个表:albums 和 album_photos。
CREATE TABLE albums (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL,
cover_path VARCHAR(255) NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
CREATE TABLE album_photos (
id INT AUTO_INCREMENT PRIMARY KEY,
album_id INT NOT NULL,
photo_path VARCHAR(255) NOT NULL,
FOREIGN KEY (album_id) REFERENCES albums(id) ON DELETE CASCADE,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);upload.php 示例代码:
<?php
// 错误报告设置
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
// 数据库配置
$dbHost = 'localhost';
$dbName = 'your_database_name'; // 替换为你的数据库名
$dbUser = 'your_db_user'; // 替换为你的数据库用户名
$dbPass = 'your_db_password'; // 替换为你的数据库密码
// 文件上传目录
$uploadDir = 'uploads/';
if (!is_dir($uploadDir)) {
mkdir($uploadDir, 0777, true); // 确保上传目录存在并可写
}
$message = '';
$messageType = '';
try {
// 建立数据库连接
$pdo = new PDO("mysql:host=$dbHost;dbname=$dbName;charset=utf8mb4", $dbUser, $dbPass);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
// 检查是否是POST请求
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$albumName = trim($_POST['album_name'] ?? '');
// 验证专辑名称
if (empty($albumName)) {
throw new Exception('专辑名称不能为空。');
}
// --- 处理封面图片上传 ---
$coverImagePath = '';
if (isset($_FILES['cover_image']) && $_FILES['cover_image']['error'] === UPLOAD_ERR_OK) {
$coverFile = $_FILES['cover_image'];
// 验证文件类型和大小 (示例:只允许图片,最大5MB)
$allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
$maxFileSize = 5 * 1024 * 1024; // 5MB
if (!in_array($coverFile['type'], $allowedTypes)) {
throw new Exception('封面图片文件类型不被允许。');
}
if ($coverFile['size'] > $maxFileSize) {
throw new Exception('封面图片文件大小超过5MB。');
}
// 生成唯一文件名,防止覆盖和安全问题
$coverExtension = pathinfo($coverFile['name'], PATHINFO_EXTENSION);
$uniqueCoverName = uniqid('cover_') . '.' . $coverExtension;
$targetCoverPath = $uploadDir . $uniqueCoverName;
if (move_uploaded_file($coverFile['tmp_name'], $targetCoverPath)) {
$coverImagePath = $targetCoverPath;
} else {
throw new Exception('封面图片上传失败。');
}
} else if (!isset($_FILES['cover_image']) || $_FILES['cover_image']['error'] !== UPLOAD_ERR_NO_FILE) {
// 如果文件存在但有错误,或者根本没有文件但不是因为用户没有选择
throw new Exception('封面图片上传错误: ' . $_FILES['cover_image']['error']);
} else {
throw new Exception('请选择一张专辑封面。');
}
// --- 将专辑信息插入到 albums 表 ---
$pdo->beginTransaction(); // 开启事务
$stmt = $pdo->prepare("INSERT INTO albums (name, cover_path) VALUES (?, ?)");
$stmt->execute([$albumName, $coverImagePath]);
$albumId = $pdo->lastInsertId(); // 获取新插入专辑的ID
// --- 处理多张照片上传 ---
if (isset($_FILES['photos']) && is_array($_FILES['photos']['name'])) {
$totalPhotos = count($_FILES['photos']['name']);
$uploadedPhotoPaths = [];
for ($i = 0; $i < $totalPhotos; $i++) {
// 检查当前文件是否有上传错误
if ($_FILES['photos']['error'][$i] === UPLOAD_ERR_OK) {
$photoFile = [
'name' => $_FILES['photos']['name'][$i],
'type' => $_FILES['photos']['type'][$i],
'tmp_name' => $_FILES['photos']['tmp_name'][$i],
'error' => $_FILES['photos']['error'][$i],
'size' => $_FILES['photos']['size'][$i],
];
// 再次进行文件类型和大小验证
if (!in_array($photoFile['type'], $allowedTypes)) {
throw new Exception('照片文件类型不被允许: ' . $photoFile['name']);
}
if ($photoFile['size'] > $maxFileSize) {
throw new Exception('照片文件大小超过5MB: ' . $photoFile['name']);
}
// 生成唯一文件名
$photoExtension = pathinfo($photoFile['name'], PATHINFO_EXTENSION);
$uniquePhotoName = uniqid('photo_') . '.' . $photoExtension;
$targetPhotoPath = $uploadDir . $uniquePhotoName;
if (move_uploaded_file($photoFile['tmp_name'], $targetPhotoPath)) {
$uploadedPhotoPaths[] = $targetPhotoPath;
} else {
throw new Exception('照片上传失败: ' . $photoFile['name']);
}
} else if ($_FILES['photos']['error'][$i] !== UPLOAD_ERR_NO_FILE) {
// 如果文件存在但有错误
throw new Exception('照片上传错误: ' . $_FILES['photos']['name'][$i] . ' - 错误码: ' . $_FILES['photos']['error'][$i]);
}
}
// 将所有上传成功的照片路径插入到 album_photos 表
if (!empty($uploadedPhotoPaths)) {
$stmt = $pdo->prepare("INSERT INTO album_photos (album_id, photo_path) VALUES (?, ?)");
foreach ($uploadedPhotoPaths as $path) {
$stmt->execute([$albumId, $path]);
}
}
}
$pdo->commit(); // 提交事务
$message = '专辑及照片上传成功!';
$messageType = 'success';
} else {
$message = '非法请求方法。';
$messageType = 'error';
}
} catch (PDOException $e) {
if (isset($pdo) && $pdo->inTransaction()) {
$pdo->rollBack(); // 发生异常时回滚事务
}
$message = '数据库操作失败: ' . $e->getMessage();
$messageType = 'error';
// 实际应用中应记录到日志而非直接显示给用户
} catch (Exception $e) {
if (isset($pdo) && $pdo->inTransaction()) {
$pdo->rollBack(); // 发生异常时回滚事务
}
$message = '上传失败: ' . $e->getMessage();
$messageType = 'error';
}
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>上传结果</title>
<style>
body { font-family: Arial, sans-serif; background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }
.message-container {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 30px;
width: 400px;
max-width: 90%;
text-align: center;
}
.message {
margin-bottom: 20px;
padding: 15px;
border-radius: 4px;
font-size: 1.1em;
word-wrap: break-word; /* 确保长消息能够换行 */
}
.message.success {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.message.error {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.back-button {
display: inline-block;
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border-radius: 4px;
text-decoration: none;
transition: background-color 0.3s ease;
}
.back-button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="message-container">
<?php if (!empty($message)): ?>
<div class="message <?php echo $messageType; ?>">
<?php echo htmlspecialchars($message); ?>
</div>
<?php endif; ?>
<a href="index.html" class="back-button">返回上传页</a>
</div>
</body>
</html>在上述PHP代码中:
以上就是PHP PDO 实现单封面与多图上传教程的详细内容,更多请关注php中文网其它相关文章!
PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号