HTML文件上传控件不支持placeholder，因浏览器忽略该属性且value无法伪造；需用label包裹并隐藏input，通过伪元素显示提示文字，再用JS监听change事件更新状态。
HTML 文件上传控件本身不支持“默认提示文本”，<input type="file"> 渲染出来的是操作系统原生选择器，没有 placeholder 或提示文字能力。所谓“设置默认提示”，实际是绕过原生样式、用其他元素模拟交互并控制状态展示。
为什么不能直接给 input[type="file"] 加 placeholder
因为浏览器根本不识别 placeholder 属性在 input[type="file"] 上——它会被忽略。DOM 中该元素的 value 在未选文件时永远是空字符串（""），且无法通过 JS 赋值伪造路径（安全限制）。所以任何“默认提示”都必须由外部 DOM 元素承担。
用 label + 伪元素实现视觉提示
这是最轻量、兼容性最好、无需 JS 的方案：
- 把
<input type="file">包进<label>，隐藏 input 但保留可点击区域 - 用
label::before或label::after插入提示文字，比如 “点击上传 HTML 文件” - 监听
input的change事件，选中后更新label文字为文件名或 “已选择 1 个文件”
示例关键 CSS：
立即学习“前端免费学习笔记（深入）”；
label.file-label {
position: relative;
display: inline-block;
cursor: pointer;
}
label.file-label input[type="file"] {
position: absolute;
left: -9999px; /* 不可用 visibility: hidden 或 display: none */
}
label.file-label::before {
content: "点击上传 HTML 文件";
color: #666;
}选中后 JS 可改写 label.textContent 或切换 class 控制显示。
input[type="file"] 的 value 无法被设为提示文字
常见错误是试图写 input.value = "请选择 HTML 文件" —— 这不会生效，浏览器会立即清空或报错。更危险的是有人尝试用 Object.defineProperty 拦截 value setter，这在现代浏览器中已被禁止，且会破坏表单重置逻辑。
真正可控的状态只有：input.files.length（0 表示未选）、input.files[0]?.name（有文件时才可读）。所有“提示”逻辑必须基于这两个事实分支判断。
移动端点击空白区域没反应？检查是否遮挡了 input 的点击热区
很多自定义样式方案用 opacity: 0 覆盖按钮，但若父容器有 pointer-events: none，或用了 z-index 错位，iOS Safari 和部分安卓 WebView 会完全忽略点击。验证方式：临时加 border: 1px solid red 到 input[type="file"]，确认它是否覆盖在目标按钮正上方、且尺寸足够。
另外，不要依赖 click() 触发时机 —— 必须确保 input 已挂载到 DOM、且前一次调用未被浏览器拒绝（比如连续快速点击）。
最容易被忽略的一点：服务端永远不能信任前端传来的文件扩展名或 accept 属性。哪怕你用 CSS 把提示文字做得再像“仅限 .html”，用户仍可通过系统对话框切到“所有文件”并选任意二进制。真实校验必须落在 MIME 类型解析和内容嗅探上。
