不同浏览器文件上传控件行为差异及Chrome/Edge验证失败问题

问题描述 #

表单包含两个文件上传字段，代码如下：

<input type="file" id="file1" name="file1" accept="application/pdf,application/msword">
<span id="file1_status">Currently uploaded: <?php echo $file1_fileName; ?></span>
<input type="file" id="file2" name="file2" accept="application/pdf,application/msword">
<span id="file2_status">Currently uploaded: <?php echo $file2_fileName; ?></span>

其中$file1_fileName和$file2_fileName页面首次加载时为"none"，表单提交后赋值为$_FILES["file1"]["name"]和$_FILES["file2"]["name"]。

页面末尾的jQuery代码用于实时显示已上传文件名：

$(document).ready(function () {  
  jQuery("input#file1").change(function () {
    var val = $(this).val();
    _('file1_status').innerHTML = "Currently uploaded: " + val.substr(12); // 移除C:/fakedir/前缀
  });
  // file2的处理逻辑与file1完全一致
});

后端未使用required属性，而是通过以下代码验证文件是否上传：

if (is_uploaded_file($_FILES["file1"]["tmp_name"])) {
 // 验证MIME类型、文件大小等
} else {
 // 在input下方提示文件未上传
}

file2的验证逻辑与file1相同。

出现的问题：

• Firefox中：用户仅上传file1未上传file2并提交，file1状态正常显示，提示file2未上传；用户上传file2后再次提交，表单可正常提交。
• Chrome/Edge中：第二次提交时，file1状态仍显示已上传，但is_uploaded_file($_FILES["file1"]["tmp_name"])验证失败，提示file1未上传。

问题原因 #

1. 浏览器安全机制差异：Chrome/Edge遵循更严格的表单重填安全规则，表单验证失败刷新页面后，不会保留file输入的真实文件数据，仅保留文件名显示（这就是前端状态还显示已上传的原因），但实际提交时没有携带file1的文件内容。而Firefox在这方面的处理更宽松，会保留已上传的文件数据。
2. 前端状态与实际提交数据不一致：前端的状态提示仅基于用户第一次选择文件后的本地修改，没有和后端提交时的真实数据绑定。当页面因验证失败刷新后，file输入框的真实值已经被浏览器清空，但前端状态还停留在之前的文件名显示，导致视觉上的误导。

解决方案 #

方案1：后端存储已上传文件的临时标识 #

当第一次上传file1成功后，后端将文件保存到临时目录，并生成唯一标识存入Session，同时渲染到页面的隐藏字段中：

<!-- 在表单内添加隐藏字段 -->
<input type="hidden" name="file1_temp_key" value="<?php echo $_SESSION['file1_temp_key'] ?? ''; ?>">

后续提交时优先检查临时标识：

// 开启Session
session_start();

// 优先使用已上传的临时文件
if (!empty($_SESSION['file1_temp_key']) && file_exists($_SESSION['file1_temp_key'])) {
    $file1_path = $_SESSION['file1_temp_key'];
    // 后续验证逻辑复用该临时文件
} elseif (isset($_FILES["file1"]["tmp_name"]) && is_uploaded_file($_FILES["file1"]["tmp_name"])) {
    // 处理新上传的文件，保存到临时目录
    $temp_dir = 'path/to/your/temp/dir/';
    if (!is_dir($temp_dir)) mkdir($temp_dir, 0755, true);
    $temp_filename = uniqid() . '_' . $_FILES["file1"]["name"];
    $temp_path = $temp_dir . $temp_filename;
    move_uploaded_file($_FILES["file1"]["tmp_name"], $temp_path);
    // 将临时路径存入Session
    $_SESSION['file1_temp_key'] = $temp_path;
} else {
    // 输出file1未上传的错误提示
}

注意：需定期清理临时目录的过期文件，避免存储空间浪费。

方案2：前端同步状态与后端数据 #

页面刷新后，根据后端返回的$file1_fileName，如果不是"none"，则禁用对应file输入框并提供重新选择按钮，明确告知用户当前输入框无实际文件：

<input type="file" id="file1" name="file1" accept="application/pdf,application/msword" <?php echo $file1_fileName !== 'none' ? 'disabled' : ''; ?>>
<span id="file1_status">Currently uploaded: <?php echo $file1_fileName; ?></span>
<?php if ($file1_fileName !== 'none'): ?>
    <button type="button" onclick="resetFileInput('file1')">重新选择file1</button>
<?php endif; ?>

<script>
function resetFileInput(id) {
    const input = document.getElementById(id);
    input.disabled = false;
    input.value = '';
    document.getElementById(id + '_status').textContent = 'Currently uploaded: none';
}
</script>

修改jQuery代码确保状态同步：

$(document).ready(function () {  
  jQuery("input#file1, input#file2").change(function () {
    const val = $(this).val();
    const statusId = $(this).attr('id') + '_status';
    if (val) {
      $('#' + statusId).text("Currently uploaded: " + val.substr(12));
    } else {
      $('#' + statusId).text("Currently uploaded: none");
    }
  });
});

方案3：使用AJAX避免页面刷新 #

将表单提交改为AJAX方式，无需刷新页面即可完成验证和提交，从根本上避免文件丢失：

$(document).on('submit', '#your-form-id', function(e) {
    e.preventDefault();
    const formData = new FormData(this);
    
    $.ajax({
        url: 'your-backend-handler.php',
        type: 'POST',
        data: formData,
        contentType: false,
        processData: false,
        success: function(res) {
            // 处理成功逻辑，比如跳转结果页
            window.location.href = 'success-page.php';
        },
        error: function(xhr) {
            // 显示错误提示，比如file2未上传
            const errorMsg = xhr.responseText;
            if (errorMsg.includes('file2')) {
                $('#file2-error').text('请上传file2文件');
            }
        }
    });
});

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