本教程详细介绍了如何使用HTML表单、PHP后端脚本和PDO数据库操作，实现同时上传一张封面图片和多张普通照片的功能。内容涵盖了前端表单的正确配置，后端$_FILES数组的处理技巧，以及如何将文件信息安全地存储到MySQL数据库中，帮助开发者构建高效的文件上传系统。
在现代web应用中，文件上传是一个常见而重要的功能。本教程将引导您完成一个场景，即在一个表单中同时上传一张专辑封面图片和多张专辑照片。我们将使用html构建表单，php处理服务器端逻辑，并通过pdo安全地将文件信息存储到mysql数据库。
1. HTML 表单结构设计
要实现文件上传功能，HTML表单需要正确配置。关键在于使用 enctype=”multipart/form-data” 属性，它告诉浏览器表单数据中包含二进制文件。对于多文件上传，input type=”file” 元素还需要添加 multiple 属性，并且其 name 属性应以 [] 结尾，以便PHP将其识别为数组。
以下是实现单封面和多图上传的HTML表单示例：
专辑上传 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; }
在上述HTML中：
action=”upload.php” 指明表单数据将被发送到 upload.php 进行处理。name=”cover_image” 用于上传单张封面图片。name=”photos[]” 和 multiple 属性组合，允许用户选择多张图片，并在PHP中以数组形式接收。accept=”image/*” 建议浏览器只允许选择图片文件，但这并非严格的安全措施，后端仍需验证。
2. PHP 后端文件处理与数据库存储
后端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 示例代码：
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 $_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';}?> 上传结果 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; } 返回上传页 
微信扫一扫 
支付宝扫一扫 
