PHP 带预览功能的图片上传 前台后台代码

在PHP中实现带预览功能的图片上传，通常需要结合前端HTML、JavaScript和后端PHP以及文件处理功能。以下是基本的前台（HTML+JavaScript）和后台（PHP）代码流程：

**前台（HTML + JavaScript）部分：**

<form id="uploadForm">
    <input type="file" id="imageFile" onchange="previewImage(this)">
    <img src="" alt="Preview Image" id="previewImg">
    <button type="submit">上传</button>
</form>

<script>
function previewImage(input) {
    var file = input.files[0];
    if (file.type.match('image.*')) {
        var reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById("previewImg").src = e.target.result;
        };
        reader.readAsDataURL(file);
    } else {
        alert("请选择一张图片");
    }
}
</script>

**后台（PHP）部分：**

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $targetDir = "uploads/";
    $targetFile = $targetDir . basename($_FILES["imageFile"]["name"]);
    
    // 检查是否超过了PHP文件大小限制等安全检查
    $allowedExts = ['jpg', 'jpeg', 'png', 'gif'];
    $fileType = strtolower(pathinfo($targetFile,PATHINFO_EXTENSION));
    if (!in_array($fileType, $allowedExts)) {
        echo "只允许上传.jpg, .jpeg, .png 和 .gif 文件.";
        exit;
    }

    if(move_uploaded_file($_FILES["imageFile"]["tmp_name"], $targetFile)) {
        echo "文件 " . htmlspecialchars(.basename($targetFile)) . " 已成功上传.";
    } else {
        echo "上传失败.";
    }
}
?>

当用户选择文件并点击上传按钮后，前端JavaScript会读取文件并显示预览图。提交表单到服务器后，PHP接收文件，进行一些必要的验证（如文件类型和大小），然后将文件保存到指定目录，并给出相应的提示。