引言
前端表单设计
HTML表单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片上传</title>
</head>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
<label for="image">选择图片文件:</label>
<input type="file" name="image" id="image" required>
<input type="submit" value="上传">
</form>
</body>
</html>
在这个表单中，我们使用了<input type="file">元素来允许用户选择文件，并设置enctype属性为multipart/form-data，这是上传文件所必需的。
表单验证
document.querySelector('form').addEventListener('submit', function(event) {
var file = document.querySelector('input[type="file"]').files[0];
var validExtensions = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
if (!validExtensions.exec(file.name)) {
alert('只能上传图片文件!');
event.preventDefault();
}
});
后端处理逻辑
PHP脚本
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_FILES['image'])) {
$image = $_FILES['image'];
$uploadDir = 'uploads/';
$uploadFile = $uploadDir . basename($image['name']);
// 检查文件大小
if ($image['size'] > 500000) {
die('文件大小不能超过500KB!');
}
// 检查文件类型
$validTypes = array('image/jpeg', 'image/png', 'image/gif');
if (!in_array($image['type'], $validTypes)) {
die('只能上传JPEG, PNG或GIF图片!');
}
// 移动文件到上传目录
if (move_uploaded_file($image['tmp_name'], $uploadFile)) {
echo "文件上传成功！";
} else {
echo "文件上传失败！";
}
}
?>
在这个脚本中，我们首先检查请求方法是否为POST，并且image文件是否存在于$_FILES数组中。然后，我们定义上传目录和文件名，并对文件大小和类型进行检查。最后，我们使用move_uploaded_file函数将文件从临时目录移动到上传目录。
错误处理
在文件上传过程中，可能会出现各种错误，例如文件大小超出、文件类型不正确或磁盘空间不足等。为了提高用户体验，我们应该在脚本中添加适当的错误处理逻辑，并给用户明确的错误信息。