文件上传校验后无法重选文件：如何重置addEventListener监听？

这个问题的核心在于你定义的txt变量是全局作用域的，而且没有在每次校验前重置它的值。第一次选择大文件后，txt被赋值了错误信息，后续即使选择符合要求的小文件，因为if条件不成立，txt依然保留着之前的错误内容，导致弹窗重复出现。

修复后的代码示例 #

<script type='text/javascript'>
document.getElementById('file_to_upload').addEventListener('change', checkFile, false);

function checkFile(e) {
    // 每次校验前初始化错误信息变量，限定在函数作用域内
    let errorMsg = '';
    const maxSize = <?php echo $max_file_size; ?>;
    const maxSizeMb = (maxSize / (1024 * 1024)).toFixed(1);
    const file_list = e.target.files;

    for (let i = 0; i < file_list.length; i++) {
        const file = file_list[i];
        const fileSizeMb = (file.size / (1024 * 1024)).toFixed(1);
        
        if (file.size > maxSize) {
            errorMsg += `Your file "${file.name}" is too big. Please keep files under ${maxSizeMb}Mb. This file is ${fileSizeMb} Mb.\n`;
        }
    }

    // 只有存在错误信息时才弹出提示
    if (errorMsg) {
        alert(errorMsg);
        // 可选：清空文件选择框，避免用户提交不符合要求的文件
        e.target.value = '';
    }
}
</script>

关键修复点 #

• 限定变量作用域：用let声明errorMsg，让它只在checkFile函数内部生效，每次触发事件都会重新初始化，彻底避免旧值残留。
• 仅在有错误时弹窗：只有检测到过大文件时才弹出警告，不会出现空弹窗或无关提示。
• 优化多文件处理：支持批量检测多个文件，每个错误文件单独标注文件名，提示信息更清晰。
• 可选的重置操作：弹窗后清空文件选择框，防止用户不小心提交不符合要求的文件（如果需要保留合法文件的选择，可以去掉这一行）。

另外要给你点个赞——你已经做了服务端校验，这非常重要：客户端校验只是提升用户体验的手段，服务端校验才是保障系统安全的最后防线，一定要保留这个机制。

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