JavaScript 获取 HTML 文件上传的文件名-html教程-PHP中文网

JavaScript 获取 HTML 文件上传的文件名

碧海醫心

发布： 2025-10-08 10:21:34

原创

293人浏览过

javascript 获取 html 文件上传的文件名

本文介绍了如何使用 JavaScript 获取 HTML 文件上传控件中选择的文件名。通过监听 change 事件，可以实时获取用户选择的文件信息，并将其文件名显示在页面上。文章提供了详细的代码示例和 CSS 样式建议，帮助开发者轻松实现文件名的动态展示。

在 Web 开发中，经常需要获取用户通过文件上传控件选择的文件名，并在页面上进行展示。直接读取 input 元素的 value 属性，只能在第二次点击按钮后才能获取到值，并且获取的是文件的完整路径，而非文件名。正确的做法是监听 input 元素的 change 事件，并在事件处理函数中获取 File 对象，进而获取文件名。

实现步骤

HTML 结构： 创建一个隐藏的文件上传控件 (input type="file")，一个按钮 (button)，以及一个用于显示文件名的 span 元素。

立即学习“Java免费学习笔记（深入）”；
```
<input type="file" name="" id="filee">
<button type="button" id="btn">Choose a File</button>
<span id="filename"></span>
```
登录后复制
注意 button 标签的 type 属性设置为 "button"，防止默认的 submit 行为。
JavaScript 代码： 获取 HTML 元素，并为文件上传控件绑定 change 事件监听器，为按钮绑定 click 事件监听器。
```
let file = document.getElementById('filee');
let btn = document.getElementById("btn");
let filename = document.getElementById("filename");

file.addEventListener('change', event => {
  const [selectedFile] = event.target.files;
  filename.innerText = selectedFile.name;
});

btn.addEventListener('click', () => {
  file.click();
});
```
登录后复制
这段代码首先获取了文件上传控件、按钮和用于显示文件名的 span 元素。然后，它为文件上传控件添加了一个 change 事件监听器。当用户选择文件后，事件处理函数会被触发，从 event.target.files 中获取 File 对象，并将其 name 属性（即文件名）赋值给 span 元素的 innerText 属性，从而在页面上显示文件名。最后，为按钮添加一个 click 事件监听器，点击按钮时，触发文件上传控件的点击事件，从而弹出文件选择框。

巧文书
巧文书是一款AI写标书、AI写方案的产品。通过自研的先进AI大模型，精准解析招标文件，智能生成投标内容。

61

查看详情
隐藏文件上传控件： 为了美观，通常会将默认的文件上传控件隐藏，并使用自定义的按钮来触发文件选择。可以使用 CSS 来实现隐藏效果。
```
#filee {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
```
登录后复制
这种方式隐藏元素更优雅，更符合语义，并且对屏幕阅读器友好。避免使用 visibility: hidden 或 display: none，因为这些方法可能会影响辅助技术的可访问性。

完整代码示例

<!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{
            clip: rect(0 0 0 0);
            clip-path: inset(50%);
            height: 1px;
            overflow: hidden;
            position: absolute;
            white-space: nowrap;
            width: 1px;
        }
    </style>
</head>
<body>
    <input type="file" name="" id="filee">
    <button type="button" 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");

        file.addEventListener('change', event => {
          const [selectedFile] = event.target.files;
          filename.innerText = selectedFile.name;
        });

        btn.addEventListener('click', () => {
          file.click();
        });
    </script>
</body>
</html>

登录后复制

注意事项