input[type="file"]的value属性显示fakepath是浏览器安全限制，真实文件名需通过input.files[0].name获取，且必须在onchange事件中判断files.length>0后读取。
input[type="file"] 的 value 属性为什么总是显示 fakepath？
浏览器出于安全限制，input[type="file"] 的 value 属性在 JS 中读取时，Windows 下会返回类似 C:\fakepath\filename.pdf 的字符串，Mac/Linux 下可能为空或只含文件名。这不是 bug，是规范行为——防止网页脚本窥探用户完整本地路径。
真正可用的文件信息藏在 input.files 这个 FileList 对象里，它才是获取真实文件名的唯一可靠入口。
用 onchange 事件 + files[0].name 显示上传文件名
监听 change 事件，在回调中访问 files[0]（单文件上传）或遍历 files（多文件），取 name 属性即可拿到原始文件名。
- 必须用
onchange，而不是onclick或oninput—— 后者在未选中文件时也会触发，files可能为空 -
files是只读类数组，不能用forEach直接调用，需转成数组或用for循环 - 若用户取消选择或清空文件，
files.length为0，务必加判断避免Cannot read property 'name' of undefined
<input type="file" id="upload"><span id="filename">未选择文件</span>
<script>
const input = document.getElementById('upload');
const span = document.getElementById('filename');
input.onchange = () => {
if (input.files.length > 0) {
span.textContent = input.files[0].name;
} else {
span.textContent = '未选择文件';
}
};
</script>
兼容多文件上传并显示全部文件名
当 input 带有 multiple 属性时，files 可能包含多个 File 对象。直接拼接 name 字符串容易被恶意文件名注入 HTML（如含 <script></script>），需做基础转义或用 textContent 渲染。
- 用
Array.from(input.files).map(f => f.name)转换为真数组再处理 - 显示时建议用逗号分隔，或每行一个
<div>，避免单行过长 <li>注意 <code>files.length上限受浏览器限制（通常数万个），但实际业务中极少遇到
<input type="file" id="multi-upload" multiple><div id="file-list"></div>
<script>
const multiInput = document.getElementById('multi-upload');
const listEl = document.getElementById('file-list');
multiInput.onchange = () => {
const names = Array.from(multiInput.files).map(f => f.name);
listEl.innerHTML = names.length
? names.map(n => `<div>${n}</script>
