PHP表单验证报错刷新后如何保留文件输入框的已选值？

要实现表单验证失败后保留已选头像，核心思路是临时存储已上传的头像文件，并在页面刷新后从临时存储中读取并回显，具体分以下几步操作：

1. 表单提交时处理头像临时存储 #

当表单POST提交后，先校验必填项，若姓名为空（验证失败）但头像已成功上传，就把头像临时保存到服务器指定目录，同时将文件路径存入Session，方便页面刷新后读取。

session_start();

// 处理表单提交
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $errors = [];
    // 验证姓名必填项
    if (empty(trim($_POST['name']))) {
        $errors[] = '姓名不能为空';
    }

    // 处理头像上传逻辑
    if (!empty($_FILES['avatar']['tmp_name'])) {
        // 限制文件类型和大小
        $allowedMime = ['image/jpeg', 'image/png', 'image/gif'];
        if (!in_array($_FILES['avatar']['type'], $allowedMime)) {
            $errors[] = '仅支持JPG/PNG/GIF格式的头像';
        } elseif ($_FILES['avatar']['size'] > 2 * 1024 * 1024) {
            $errors[] = '头像大小不能超过2MB';
        } else {
            // 生成唯一临时文件名，避免重名冲突
            $tmpFileName = uniqid('avatar_', true) . '.' . pathinfo($_FILES['avatar']['name'], PATHINFO_EXTENSION);
            $tmpDir = './temp_avatars/';
            $tmpFilePath = $tmpDir . $tmpFileName;

            // 确保临时目录存在且可写
            if (!is_dir($tmpDir)) {
                mkdir($tmpDir, 0755, true);
            }

            // 移动上传文件到临时目录
            if (move_uploaded_file($_FILES['avatar']['tmp_name'], $tmpFilePath)) {
                // 清理旧的临时头像（如果有）
                if (!empty($_SESSION['tmp_avatar'])) {
                    unlink($_SESSION['tmp_avatar']);
                }
                // 将临时路径存入Session
                $_SESSION['tmp_avatar'] = $tmpFilePath;
            } else {
                $errors[] = '头像上传失败，请重试';
            }
        }
    }

    // 验证失败则返回表单页面，保留输入数据和临时头像
    if (!empty($errors)) {
        $_SESSION['form_errors'] = $errors;
        $_SESSION['form_data'] = $_POST; // 保留姓名、手机号输入值
        header('Location: form.php');
        exit;
    } else {
        // 验证通过，将临时头像移至正式存储目录
        $finalDir = './avatars/';
        if (!is_dir($finalDir)) {
            mkdir($finalDir, 0755, true);
        }
        $finalFilePath = $finalDir . basename($_SESSION['tmp_avatar']);
        rename($_SESSION['tmp_avatar'], $finalFilePath);

        // 这里执行写入数据库等业务操作，例如保存头像路径到用户记录
        // ...

        // 清理Session中的临时数据
        unset($_SESSION['tmp_avatar']);
        unset($_SESSION['form_data']);
        header('Location: success.php');
        exit;
    }
}

2. 前端页面回显已选择的头像 #

在表单页面，读取Session中的临时头像路径和之前的输入数据，若存在临时头像则直接显示预览图，同时保留姓名、手机号的输入值，提升用户体验。

<?php
session_start();
$formData = $_SESSION['form_data'] ?? [];
$tmpAvatar = $_SESSION['tmp_avatar'] ?? '';
$errors = $_SESSION['form_errors'] ?? [];
// 清除错误会话，避免刷新后重复显示错误
unset($_SESSION['form_errors']);
?>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户信息表单</title>
</head>
<body>
    <?php if (!empty($errors)): ?>
        <div style="color: red;">
            <?php foreach ($errors as $error): ?>
                <p><?php echo htmlspecialchars($error); ?></p>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>

    <form method="post" enctype="multipart/form-data">
        <div>
            <label>姓名：</label>
            <input type="text" name="name" value="<?php echo htmlspecialchars($formData['name'] ?? ''); ?>" required>
        </div>
        <div>
            <label>手机号：</label>
            <input type="tel" name="phone" value="<?php echo htmlspecialchars($formData['phone'] ?? ''); ?>">
        </div>
        <div>
            <label>头像：</label>
            <?php if (!empty($tmpAvatar) && file_exists($tmpAvatar)): ?>
                <!-- 显示已上传的头像预览 -->
                <img src="<?php echo htmlspecialchars($tmpAvatar); ?>" alt="已选头像" style="width:120px;height:120px;border-radius:50%;">
                <p>当前已上传头像，如需更换请重新选择文件</p>
                <!-- 隐藏输入存储临时路径，提交时告知后端 -->
                <input type="hidden" name="tmp_avatar_path" value="<?php echo htmlspecialchars($tmpAvatar); ?>">
            <?php endif; ?>
            <input type="file" name="avatar" accept="image/jpeg,image/png,image/gif">
        </div>
        <button type="submit">提交表单</button>
    </form>
</body>
</html>

3. 关键注意事项 #

• 确保服务器上的temp_avatars和avatars目录存在且拥有读写权限（可通过chmod 755命令设置）。
• 定期清理临时目录的过期文件，比如编写定时脚本删除超过24小时的临时头像，避免占用过多存储空间。
• 所有输出到前端的变量都使用htmlspecialchars()转义，防止XSS攻击。
• 若用户重新选择新头像，要自动删除旧的临时文件，避免冗余数据堆积。

内容的提问来源于stack exchange，提问作者Amirhossein Hajighorbani