轻松掌握PHP:一文教你实现多图上传,告别单图烦恼!
准备工作
在进行多图上传之前,我们需要做好以下准备工作:
- 服务器环境:确保你的服务器支持PHP。
- PHP版本:推荐使用PHP 7.0及以上版本。
- 文件上传配置:在PHP配置文件(php.ini)中,调整
upload_max_filesize
和post_max_size
参数,以满足大文件上传的需求。
前端实现
1. HTML结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>多图上传</title>
</head>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="images[]" multiple>
<input type="submit" value="上传">
</form>
</body>
</html>
2. CSS样式(可选)
为了提升用户体验,我们可以为上传表单添加一些CSS样式。
input[type="file"] {
width: 100%;
height: 40px;
background-color: #f1f1f1;
border: none;
border-radius: 5px;
padding: 10px;
margin-top: 10px;
}
input[type="submit"] {
width: 100%;
height: 40px;
background-color: #4CAF50;
border: none;
border-radius: 5px;
color: white;
font-size: 16px;
cursor: pointer;
}
后端实现
1. PHP代码
<?php
// upload.php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
$uploadDir = 'uploads/';
foreach ($_FILES['images']['name'] as $key => $name) {
$tmpName = $_FILES['images']['tmp_name'][$key];
$error = $_FILES['images']['error'][$key];
$type = $_FILES['images']['type'][$key];
if ($error === 0 && in_array($type, $allowedTypes)) {
$newName = uniqid() . '_' . $name;
move_uploaded_file($tmpName, $uploadDir . $newName);
echo "上传成功:{$uploadDir}{$newName}<br>";
} else {
echo "上传失败:{$name}<br>";
}
}
}
?>
2. 代码说明
- 在
upload.php
文件中,我们首先检查了请求方法是否为POST。 - 通过
$_FILES
数组获取上传的图片信息。 - 检查每个上传的文件是否没有错误,并且文件类型是允许的。
- 使用
uniqid()
函数生成唯一的文件名,以避免文件名冲突。 - 使用
move_uploaded_file()
函数将上传的文件移动到服务器上的指定目录。