php实现图片上传预览
图片上传预览实现方法
在PHP中实现图片上传预览功能，可以通过前端JavaScript实时显示用户选择的图片，再通过PHP处理后端上传逻辑。
前端HTML部分
创建包含文件输入和预览区域的表单：
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="image" id="imageInput" accept="image/*">
<div id="previewContainer">
<img id="previewImage" style="max-width: 300px; display: none;">
</div>
<button type="submit">上传</button>
</form>JavaScript预览功能
使用FileReader API实现客户端预览：
document.getElementById('imageInput').addEventListener('change', function(e) {
const file = e.target.files[0];
if (!file.type.match('image.*')) return;
const reader = new FileReader();
reader.onload = function(e) {
const preview = document.getElementById('previewImage');
preview.src = e.target.result;
preview.style.display = 'block';
};
reader.readAsDataURL(file);
});PHP后端处理
创建upload.php处理文件上传：
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$targetDir = "uploads/";
$targetFile = $targetDir . basename($_FILES["image"]["name"]);
$imageFileType = strtolower(pathinfo($targetFile, PATHINFO_EXTENSION));
// 检查是否为真实图片
$check = getimagesize($_FILES["image"]["tmp_name"]);
if ($check === false) {
die("文件不是图片");
}
// 检查文件大小（例如限制5MB）
if ($_FILES["image"]["size"] > 5000000) {
die("文件太大");
}
// 允许特定格式
$allowed = ['jpg', 'jpeg', 'png', 'gif'];
if (!in_array($imageFileType, $allowed)) {
die("只允许JPG, JPEG, PNG & GIF文件");
}
// 保存文件
if (move_uploaded_file($_FILES["image"]["tmp_name"], $targetFile)) {
echo "文件 ". htmlspecialchars(basename($_FILES["image"]["name"])). " 上传成功";
} else {
echo "上传失败";
}
}
?>安全增强措施
限制上传文件类型和大小：
// 在PHP配置中限制上传大小
ini_set('upload_max_filesize', '5M');
ini_set('post_max_size', '5M');使用随机文件名防止覆盖：
$newFileName = uniqid() . '.' . $imageFileType;
$targetFile = $targetDir . $newFileName;完整流程说明
用户选择图片后立即在页面显示预览 提交表单时将文件发送到服务器 PHP验证文件类型、大小等参数 通过安全方式保存文件到指定目录 返回上传结果给用户
以上方法实现了基本的图片上传预览功能，可根据实际需求调整预览样式和上传处理逻辑。
