input.files[0].name是唯一可靠方式获取文件名，因input.value的fakepath是浏览器安全限制，非bug；必须在onchange事件中判断files.length>0后读取，且files为只读filelist需转数组遍历。

input.files[0].name 是唯一可靠方式，input.value 的 fakepath 不能用于业务逻辑。

为什么 input.value 显示 C:\fakepath\xxx？

这是浏览器主动施加的安全限制，不是 bug。Windows 下返回带 fakepath 的路径，macOS/Linux 下可能为空或仅含文件名——目的是防止网页读取用户真实本地路径。你永远不该解析 value 字符串来提取文件名。

必须用 onchange 事件读取 files

onchange 是唯一能确保用户完成选择的时机；onclick 或 oninput 会在点击但未选中任何文件时触发，导致 files 为空。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 务必先判断 input.files.length > 0，否则访问 files[0].name 会报 Cannot read property 'name' of undefined
• input.files 是只读的 FileList，不是真数组，不能直接调用 forEach；需用 Array.from(input.files) 或 for 循环遍历
• 单文件上传：取 input.files[0].name；多文件（带 multiple）：遍历整个 files

显示长文件名时要截断 + 悬停提示全名

直接显示完整文件名容易撑破容器或被注入 HTML（如文件名含 <script></script>）。推荐做法：

• 用 textContent 渲染，天然防 XSS
• 截断逻辑建议：取前 20 字符 + …，例如 filename.substring(0, 20) + (filename.length > 20 ? '…' : '')
• 把完整文件名存进 title 属性，鼠标悬停即显示；或用 data-fullname 自定义属性配合 JS tooltip

获取文件夹名需要额外支持

普通 input[type="file"] 只能选文件，不能选文件夹。要获取文件夹名，必须启用目录选择模式：

• 添加 webkitdirectory directory 属性：<input type="file" webkitdirectory directory>
• 在 change 事件中，取 files[0].webkitRelativePath，再用 .split('/')[0] 提取第一级目录名
• 注意：该 API 非标准，Chrome/Edge 支持较好，Firefox 和 Safari 不支持或行为不一致

真正关键的细节是：所有文件信息都藏在 files 里，而它只在 change 后有效；任何绕过这个链路的尝试，比如监听 click、依赖 value、或在表单提交时才去读，都会掉坑里。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！