input.files[0].name是唯一可靠方式，因现代浏览器为安全限制屏蔽真实路径，input.value仅返回c:\fakepath\或空字符串，不可解析且跨浏览器不一致。
input.files[0].name 是唯一可靠的方式，input.value 在现代浏览器中只返回 fakepath 或空字符串，不能用。
为什么不能用 input.value 获取文件名
出于安全限制，Chrome、Firefox、Edge 等主流浏览器会屏蔽完整本地路径，input.value 可能返回 C:\fakepath\xxx.jpg（旧版 Chrome）或直接为空。该行为由规范强制要求，不是 bug，也不可绕过。
- 即使在开发者工具里看到
value有值，它也不稳定，不同浏览器/版本表现不一致 -
value是只读的字符串，无法解析出真实文件名，且不含扩展名语义 - 依赖
value的代码在 Safari 或新版本 Edge 中大概率失效
正确做法：监听 change 事件并读取 files 对象
必须通过 input.files（FileList）访问，它是标准、跨浏览器、带元数据的接口。
- 单文件场景：
input.files.length > 0 && input.files[0].name - 多文件（含
multiple属性）：Array.from(input.files).map(f => f.name) - 文件名需防 XSS？用
textContent渲染，别用innerHTML - 注意：
files是实时只读集合，不可修改，也不能用forEach直接遍历（需转数组）
name 字段的边界情况和注意事项
File.name 是浏览器从用户选择动作中提取的原始文件名，但它不保证合法或安全：
- 可能含路径分隔符（如
../../etc/passwd），但实际上传时服务端应忽略路径部分，只取 basename - 可能含 Unicode、空格、控制字符——前端显示前建议用
encodeURIComponent或简单截断处理 - 若用户未选文件，
files.length为 0，访问files[0]会得undefined，需判空 - IE10+ 支持
files，但 IE9 及更早不支持——如需兼容，只能降级用 Flash 或 iframe 模拟
最常被忽略的一点：change 事件只在用户真正选择新文件时触发；如果用户两次选同一个文件，事件不会重复触发，files 也不会更新。需要业务逻辑自行处理“重复选择”场景，比如清空 input 的 value 再设回空字符串来重置状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
