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

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

心靈之曲

发布： 2025-10-08 11:19:11

原创

672人浏览过

获取html文件上传的文件名：javascript教程

本文旨在指导开发者如何使用JavaScript在HTML文件上传时获取文件名。通过监听change事件，我们可以实时获取用户选择的文件名，并将其显示在页面上。本文将提供详细的代码示例和步骤，帮助你轻松实现这一功能，并解决常见问题。

监听change事件获取文件名

当用户通过 <input type="file"> 元素选择文件后，会触发 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 {
            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>

登录后复制

代码解释：

立即学习“Java免费学习笔记（深入）”；

易森网络企业版

如果您是新用户，请直接将本程序的所有文件上传在任一文件夹下，Rewrite 目录下放置了伪静态规则和筛选器，可将规则添加进IIS，即可正常使用，不用进行任何设置；(可修改图片等)默认的管理员用户名、密码和验证码都是：yeesen系统默认关闭，请上传后登陆后台点击“核心管理”里操作如下:进入“配置管理”中的&ld

查看详情

HTML 结构：
- <input type="file" id="filee">: 文件上传的输入元素，id 设置为 filee，并使用CSS隐藏。
- <button id="btn">Choose a File</button>: 一个按钮，用于触发文件选择对话框。
- <span id="filename"></span>: 一个 span 元素，用于显示文件名。
JavaScript 代码：
- let file = document.getElementById('filee');: 获取文件输入元素。
- let btn = document.getElementById("btn");: 获取按钮元素。
- let filename = document.getElementById("filename");: 获取 span 元素。
- file.addEventListener('change', event => { ... });: 监听文件输入元素的 change 事件。
  - const [selectedFile] = event.target.files: 从 event.target.files 数组中获取第一个选择的文件对象。
  - filename.innerText = selectedFile.name;: 将获取到的文件名设置到 span 元素的 innerText 属性中，从而显示文件名。
- btn.addEventListener('click', () => { file.click(); });: 监听按钮的点击事件，点击时触发文件输入元素的点击事件，打开文件选择对话框。

隐藏文件上传输入框

上述代码中，我们使用了一些 CSS 样式来隐藏原生的文件上传输入框。这是为了美化界面，通常我们会自定义一个按钮来触发文件选择。

#filee {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

登录后复制

这些 CSS 样式将文件上传输入框隐藏，但仍然保留其功能。点击按钮时，实际上是触发了隐藏的文件上传输入框的点击事件。

注意事项

安全性： 浏览器出于安全考虑，不允许通过 JavaScript 直接设置文件上传输入框的值。用户必须手动选择文件。
文件对象： event.target.files 返回的是一个 FileList 对象，包含了用户选择的所有文件。如果只允许单文件上传，可以通过 event.target.files[0] 获取第一个文件对象。
兼容性： 确保你的代码在目标浏览器上具有良好的兼容性。