J*aScript 获取 HTML 文件上传的文件名_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

J*aScript 获取 HTML 文件上传的文件名

2025-10-08

浏览次数：次

返回列表

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

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

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

实现步骤

HTML 结构： 创建一个隐藏的文件上传控件 (input type="file")，一个按钮 (button)，以及一个用于显示文件名的 span 元素。
```
<input type="file" name="" id="filee">
<button type="button" id="btn">Choose a File</button>
<span id="filename"></span>
```
注意 button 标签的 type 属性设置为 "button"，防止默认的 submit 行为。
J*aScript 代码： 获取 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 事件监听器，点击按钮时，触发文件上传控件的点击事件，从而弹出文件选择框。
jQuery多文件上传并获取大小与格式代码
jQuery多文件上传并获取大小与格式代码
50 查看详情
隐藏文件上传控件： 为了美观，通常会将默认的文件上传控件隐藏，并使用自定义的按钮来触发文件选择。可以使用 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/j*ascript">
        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>