当前位置：首页 > PHP

php实现图片上传预览

2026-04-03 01:05:53PHP

图片上传预览实现步骤

在PHP中实现图片上传预览功能，通常需要结合前端JavaScript和后端PHP代码。以下是完整的实现方法：

php实现图片上传预览

前端HTML和JavaScript部分

创建文件上传表单并添加预览功能：

php实现图片上传预览

<form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="image" id="imageInput" accept="image/*">
    <img id="preview" src="#" alt="预览图" style="max-width: 300px; display: none;">
    <input type="submit" value="上传">
</form>

<script>
document.getElementById('imageInput').addEventListener('change', function(e) {
    const preview = document.getElementById('preview');
    const file = e.target.files[0];

    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            preview.src = e.target.result;
            preview.style.display = 'block';
        }
        reader.readAsDataURL(file);
    }
});
</script>

后端PHP处理部分

创建upload.php文件处理上传：

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['image'])) {
    $targetDir = "uploads/";
    $targetFile = $targetDir . basename($_FILES["image"]["name"]);
    $uploadOk = 1;
    $imageFileType = strtolower(pathinfo($targetFile, PATHINFO_EXTENSION));

    // 检查是否为真实图片
    $check = getimagesize($_FILES["image"]["tmp_name"]);
    if ($check === false) {
        echo "文件不是图片。";
        $uploadOk = 0;
    }

    // 检查文件大小（限制为2MB）
    if ($_FILES["image"]["size"] > 2000000) {
        echo "图片太大，请上传小于2MB的文件。";
        $uploadOk = 0;
    }

    // 允许的图片格式
    $allowedTypes = ['jpg', 'jpeg', 'png', 'gif'];
    if (!in_array($imageFileType, $allowedTypes)) {
        echo "只允许上传JPG, JPEG, PNG和GIF格式的图片。";
        $uploadOk = 0;
    }

    // 检查上传状态
    if ($uploadOk == 1) {
        if (move_uploaded_file($_FILES["image"]["tmp_name"], $targetFile)) {
            echo "图片上传成功: <img src='$targetFile' style='max-width: 300px;'>";
        } else {
            echo "上传过程中发生错误。";
        }
    }
}
?>

安全增强措施

为增强安全性，可以考虑以下改进：

// 生成随机文件名
$newFileName = uniqid() . '.' . $imageFileType;
$targetFile = $targetDir . $newFileName;

// 添加文件类型白名单验证
$finfo = finfo_open(FILEINFO_MIME_TYPE);
$mime = finfo_file($finfo, $_FILES["image"]["tmp_name"]);
$allowedMimes = ['image/jpeg', 'image/png', 'image/gif'];
if (!in_array($mime, $allowedMimes)) {
    die("不允许的文件类型");
}