本文介绍了如何使用 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 事件监听器，点击按钮时，触发文件上传控件的点击事件，从而弹出文件选择框。
-
隐藏文件上传控件： 为了美观，通常会将默认的文件上传控件隐藏，并使用自定义的按钮来触发文件选择。可以使用 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>注意事项
- event.target.files 返回一个 FileList 对象，即使只允许上传一个文件，也需要通过索引 [0] 来获取 File 对象。
- File 对象包含很多有用的信息，例如 name（文件名）、size（文件大小）、type（文件类型）等，可以根据需要进行使用。
- 出于安全考虑，浏览器不允许 JavaScript 直接操作本地文件系统，因此无法直接获取文件的完整路径。
总结
通过监听 change 事件，可以方便地获取 HTML 文件上传控件中选择的文件名，并将其动态显示在页面上。这种方法简单易用，并且可以获取到 File 对象的其他有用信息，为 Web 开发提供了便利。 记住使用合适的 CSS 样式来隐藏默认的文件上传控件，并提供自定义的按钮来提升用户体验。
