首页 > 文章 > 前端

HTML文件上传获取文件名方法

时间：2025-11-02 19:30:39 282浏览收藏

还在为HTML文件上传时如何获取文件名而烦恼吗？本教程为你提供清晰简洁的JavaScript解决方案！通过监听`change`事件，实时捕获用户选择的文件名，并动态显示在页面上，提升用户体验。本文详细讲解如何使用`<input type="file">`元素，以及如何通过JavaScript代码获取`FileList`对象，提取文件名。更有隐藏原生文件输入框的CSS技巧，以及完整的HTML、CSS、JavaScript代码示例，助你轻松实现文件上传文件名获取功能，解决前端开发难题。掌握此技巧，让你的文件上传功能更加完善！

获取 HTML 文件上传的文件名：JavaScript 教程

本文旨在提供一个清晰简洁的 JavaScript 教程，用于解决在 HTML 文件上传过程中，如何实时获取并显示所选文件的文件名的问题。通过监听 change 事件，我们可以捕获文件输入框的变化，并提取文件名，将其动态显示在页面上。本文将提供详细的代码示例和解释，帮助开发者轻松实现这一功能。

获取文件名的方法

在 HTML 中使用 <input type="file"> 元素允许用户从本地文件系统中选择文件。然而，直接通过 file.value 获取文件名往往不是一个可靠的方法，尤其是在某些浏览器中，出于安全考虑，它可能只返回一个空字符串或者包含文件路径的字符串。

正确的做法是监听 input 元素的 change 事件。当用户选择文件后，该事件会被触发，我们可以通过事件对象 event 获取到 FileList 对象，该对象包含了用户选择的所有文件信息。

以下是一个详细的步骤和代码示例：

HTML 结构：
首先，我们需要一个文件输入框和一个用于显示文件名的 span 元素。为了美观和用户体验，通常会隐藏原生的文件输入框，并使用一个按钮来触发文件选择。
```
&lt;input type=&quot;file&quot; name=&quot;&quot; id=&quot;filee&quot;&gt;
<button type="button" id="btn">Choose a File</button>
<span id="filename"></span>
```
CSS 样式 (可选):
为了隐藏原生的文件输入框，可以使用以下 CSS 样式：
```
#filee {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
```
这些样式将文件输入框隐藏，但仍然保持其功能可用。 clip 和 clip-path 属性用于尽可能地隐藏元素，height 和 width 设置为 1px 保证元素占据极小的空间， overflow: hidden 确保超出 1px 的内容被隐藏，position: absolute 和 white-space: nowrap 进一步确保元素不会影响布局。
JavaScript 代码：
接下来，使用 JavaScript 代码来监听 change 事件，并获取文件名。
```
let file = document.getElementById('filee');
let btn = document.getElementById("btn");
let filename = document.getElementById("filename");

file.addEventListener('change', event => {
  const [file] = event.target.files; // 获取 FileList 对象中的第一个文件
  if (file) { // 检查是否有选择文件
    filename.innerText = file.name; // 将文件名显示在 span 元素中
  } else {
    filename.innerText = ""; // 如果没有选择文件，则清空 span 元素
  }
});

btn.addEventListener('click', () => {
  file.click(); // 触发文件选择
});
```
代码解释：
- document.getElementById('filee')：获取文件输入框元素。
- document.getElementById('btn')：获取按钮元素。
- document.getElementById('filename')：获取用于显示文件名的 span 元素。
- file.addEventListener('change', event => { ... })：为文件输入框添加 change 事件监听器。当用户选择文件后，该函数会被执行。
- event.target.files：返回一个 FileList 对象，包含了用户选择的所有文件。
- const [file] = event.target.files：使用解构赋值获取 FileList 对象中的第一个文件。如果用户选择了多个文件，这里只会获取第一个文件的信息。
- filename.innerText = file.name：将获取到的文件名赋值给 span 元素的 innerText 属性，从而在页面上显示文件名。
- btn.addEventListener('click', () => { file.click(); })：为按钮添加点击事件监听器，当按钮被点击时，触发文件输入框的 click 事件，从而打开文件选择对话框。

完整示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Get File Name</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>
    &lt;input type=&quot;file&quot; name=&quot;&quot; id=&quot;filee&quot;&gt;
    <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 [file] = event.target.files;
          if (file) {
            filename.innerText = file.name;
          } else {
            filename.innerText = "";
          }
        });

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

注意事项

安全性： 不要完全依赖客户端的文件名进行任何安全相关的操作。用户可以修改文件名，因此需要在服务器端进行验证。
多文件上传： 如果需要支持多文件上传，需要修改代码来遍历 FileList 对象，并显示所有文件名。
浏览器兼容性： 现代浏览器都支持 FileList 对象，但为了兼容旧版本浏览器，可能需要使用 polyfill。
文件类型限制： 可以通过 accept 属性限制用户可以选择的文件类型，例如 <input type="file" accept=".jpg,.png">。

总结

通过监听 change 事件，我们可以轻松地获取 HTML 文件上传的文件名，并将其显示在页面上。这种方法简单易懂，并且具有良好的浏览器兼容性。记住，安全性至关重要，永远不要完全依赖客户端提供的信息。希望这篇教程能够帮助你解决在文件上传过程中遇到的问题。

终于介绍完啦！小伙伴们，这篇关于《HTML文件上传获取文件名方法》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！