当前位置：首页 > PHP

php实现图片上传预览

2026-02-13 17:34:19PHP

图片上传预览实现方法

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

前端HTML部分

创建包含文件选择和预览区域的表单：

<form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" id="imageUpload" name="image" accept="image/*">
    <div id="imagePreview"></div>
    <button type="submit">上传</button>
</form>

JavaScript预览功能

使用FileReader API实现客户端预览：

php实现图片上传预览

document.getElementById('imageUpload').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('imagePreview');
        preview.innerHTML = '';
        const img = document.createElement('img');
        img.src = e.target.result;
        img.style.maxWidth = '300px';
        preview.appendChild(img);
    };
    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("文件不是图片");
    }

    // 限制文件大小（例如2MB）
    if ($_FILES["image"]["size"] > 2000000) {
        die("图片太大，请上传小于2MB的图片");
    }

    // 允许特定格式
    $allowedTypes = ['jpg', 'jpeg', 'png', 'gif'];
    if (!in_array($imageFileType, $allowedTypes)) {
        die("只允许JPG, JPEG, PNG和GIF格式");
    }

    // 上传文件
    if (move_uploaded_file($_FILES["image"]["tmp_name"], $targetFile)) {
        echo "图片上传成功: <img src='$targetFile' style='max-width:300px'>";
    } else {
        echo "上传失败";
    }
}
?>

安全增强措施

设置上传目录不可执行

php实现图片上传预览

// 在uploads目录中放置.htaccess文件
// 内容为：php_flag engine off

生成随机文件名防止覆盖

$newFileName = uniqid() . '.' . $imageFileType;
$targetFile = $targetDir . $newFileName;

验证MIME类型

$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("无效的图片类型");
}

完整示例整合

将前端预览和后端处理结合在一个页面中：

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 处理上传逻辑...
}
?>
<!DOCTYPE html>
<html>
<head>
    <script>
        // JavaScript预览代码...
    </script>
</head>
<body>
    <form method="post" enctype="multipart/form-data">
        <!-- HTML表单代码... -->
    </form>
</body>
</html>

这种方法实现了客户端即时预览和服务器端安全验证的完整图片上传流程。