如何解决JavaScript获取文件上传控件文件名不更新的问题？

你遇到的问题核心在于：只在页面初始化时读取了一次文件名，没有监听文件输入框的change事件，所以切换文件时不会自动重新获取新文件名，必须刷新页面才能重新读取。调整下代码逻辑，添加事件监听就能轻松解决。

完整解决方案 #

给文件输入框绑定change事件，每次用户选择新文件时，重新获取并更新文件名。下面是可直接复用的示例代码：

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <!-- 文件上传输入框 -->
    <input type="file" id="upload_file">
    <!-- 用于实时显示文件名的区域 -->
    <p>当前选中的文件名：<span id="file_name_display"></span></p>

    <script>
        // 获取DOM元素
        const fileInput = document.getElementById('upload_file');
        const fileNameDisplay = document.getElementById('file_name_display');

        // 定义更新文件名的复用函数
        function updateFileName() {
            if (fileInput.files.length > 0) {
                // 有文件选中时，提取第一个文件的名称
                const latestFileName = fileInput.files[0].name;
                fileNameDisplay.textContent = latestFileName;
            } else {
                // 无文件选中时清空显示内容
                fileNameDisplay.textContent = '';
            }
        }

        // 页面加载时先执行一次（处理浏览器记住的上次文件选择状态）
        updateFileName();

        // 监听文件输入框的change事件，每次切换文件都触发更新
        fileInput.addEventListener('change', updateFileName);
    </script>
</body>
</html>

关键逻辑说明 #

• change事件会在用户选择新文件（包括取消选择后重新选择）时触发，确保文件名实时更新
• 将获取文件名的逻辑封装成函数，既可以在页面初始化时使用，也能在事件触发时复用
• 加入了空文件状态的处理，避免用户取消选择后仍然显示旧文件名

修改后，你切换文件时就能实时看到最新的文件名，再也不用依赖刷新浏览器了！

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