唯一可靠方案是隐藏原生input并用label包裹自定义文案；因浏览器硬编码文件按钮文字且value/placeholder/伪元素content均无效，label触发语义清晰、无障碍友好、全平台兼容。
原生 <input type="file"> 的按钮文字和提示文案无法被直接修改，所有试图用 value、placeholder 或 CSS 伪元素改文字的方案都会失败。唯一可靠、无障碍友好、全平台兼容的做法是：隐藏原生 input，用 <label></label> 承载自定义文案并触发选择框。
为什么不能直接改 <input type="file"> 的文字
浏览器硬编码了“Choose File”“Select File”等文案，且随系统语言自动本地化。value 对该元素只读，设置无效；placeholder 根本不被支持；::file-selector-button 只能调样式（如 background、padding），不能改内容——写 content: "上传" 完全无效。Chrome、Safari、Firefox 各自渲染不同，没有统一入口。
用 <label></label> 包裹是最稳的方案
把 <input type="file"> 作为 <label></label> 的直接子元素，点击 label 就等价于点击 input，无需 JS，语义清晰，屏幕阅读器可读，iOS Safari 兼容性最好。
- HTML 结构必须是：
<label><input type="file" accept=".pdf,.jpg">点击上传 PDF</label> - CSS 隐藏 input：
label input { position: absolute; left: -9999px; top: 0; }（禁用display: none或visibility: hidden，否则 iOS 失效） -
accept要写精确扩展名，iOS 只认".pdf,.jpg"，不认"application/pdf"或"image/*" - 多文件加
multiple即可，与accept共存无冲突
如果必须用 JS 触发（比如按钮不在 label 内）
手动调用 input.click() 是可行的，但必须满足三个硬性条件，缺一不可：
- 调用必须发生在用户真实点击事件的同步回调中（例如
button.addEventListener('click', () => input.click())） - input 不能是
display: none或visibility: hidden，推荐用position: absolute; left: -9999px隐藏 - 移动端需额外加
input.focus()提升 iOS 可靠性，且避免在touchstart中调用（iOS 会拦截）
监听选中后别直接读 files[0].name
e.target.files 是 FileList，不是数组，也没有 map 方法；用户取消选择时 files.length === 0，直接取 [0].name 会报错。
- 安全写法：
e.target.files[0]?.name || '未选择文件' - 预览图片优先用
URL.createObjectURL(file)，上传成功后立刻执行URL.revokeObjectURL(url)，否则内存泄漏 - 大文件（>100MB）别用
FileReader全量读取，直接塞进FormData提交
最易被忽略的点是：iOS 对 accept 的解析极其严格，写错一个字符或空格，过滤就完全失效；而 display: none 看似省事，实则在微信 WebView 和 Safari 17+ 中会让整个上传逻辑静默崩溃——这些都不是“偶尔出问题”，而是确定性失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
