HTML JavaScript文件上传：点击按钮后无法实时获取文件名问题求助

问题原因 #

你当前的代码逻辑是点击按钮后立刻读取file.value，但此时文件选择对话框还处于打开状态，用户还没完成文件选择操作，所以读取到的是上一次选择的文件值（或空值）。只有当用户关闭对话框完成选择后，文件输入框的value才会更新，这就导致第二次点击按钮时才显示之前选的文件名。

修复方案 #

给文件输入框绑定change事件，当用户完成文件选择后，自动触发更新文件名的操作，而不是在按钮点击后立即取值。修改后的完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        #filee{
            visibility: hidden;
        }
    </style>
</head>
<body>
    <input type="file" name="" id="filee">
    <button onclick="ftn()" id="btn">Choose a File</button>
    <span id="filename"></span> 
    <script type="text/javascript">
        let file = document.getElementById('filee');
        let btn = document.getElementById("btn");
        let filename = document.getElementById("filename");
        
        // 绑定change事件，文件选择后更新显示
        file.addEventListener('change', function() {
            filename.innerText = this.value;
        });

        function ftn(){
            file.click();
            // 移除这里的取值操作，交给change事件处理
        }
    </script>
</body>
</html>

额外优化（可选） #

如果你只想显示文件名而不是完整路径，可以对value做处理：

file.addEventListener('change', function() {
    // 提取文件名，兼容不同浏览器的路径格式
    const fullPath = this.value;
    const fileName = fullPath.split(/[\\/]/).pop();
    filename.innerText = fileName;
});

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