正确做法是用position: absolute; left: -9999px视觉隐藏文件输入框以保留可交互性，再通过按钮点击事件同步调用其click()方法触发选择对话框，并监听change事件获取filelist。
点击按钮触发文件选择对话框
默认的 <input type="file"> 会渲染成一个带“选择文件”文字的原生按钮，样式丑、难定制。想用自定义按钮（比如带图标的蓝色按钮）来触发文件选择，核心是把原生 <input type="file"> 隐藏掉，再用 JS 调用它的 click() 方法。
常见错误是直接给 <input> 加 display: none 或 visibility: hidden —— 这会导致它无法被 JS 的 click() 触发（部分浏览器会静默忽略）。正确做法是用视觉隐藏但保留可交互性：
- 用
position: absolute; left: -9999px把它移出视口 - 或用
opacity: 0; width: 1px; height: 1px; overflow: hidden; - 必须保留
type="file"和id（用于label[for]或 JS 查询）
然后绑定自定义按钮的 click 事件，调用隐藏 input 的 click()：
<button id="upload-btn">? 上传文件</button>
<input type="file" id="file-input" style="position: absolute; left: -9999px;"><script>
document.getElementById('upload-btn').addEventListener('click', () => {
document.getElementById('file-input').click();
});
</script>
限制文件类型和数量
用户点开后能选任意文件，但业务往往只要图片或 PDF。靠前端限制不是安全手段，但能提升体验、减少无效提交。关键参数是 accept 和 multiple：
-
accept="image/*"：允许所有图片（image/png、image/jpeg等） -
accept=".pdf,.docx"：按扩展名过滤（注意开头带点） -
multiple属性开启多选；没它就只能选一个 -
accept只影响文件选择器界面，不能阻止用户手动输入路径或拖入不匹配文件
示例：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<input type="file" id="file-input" accept="image/*,.pdf" multiple style="position: absolute; left: -9999px;">
监听选中后的文件列表
用户选完不会自动提交，得靠监听 change 事件获取 input.files —— 它是个 FileList 对象，类似数组但不是 Array，不能直接用 map 或 forEach：
-
input.files.length是选中文件数 -
input.files[0]是第一个文件，含name、size、type（MIME）、lastModified等属性 - 要转成数组可用
Array.from(input.files)或[...input.files] - 如果没选任何文件（比如点了取消），
input.files.length为 0，且input.value为空字符串
别用 input.value 判断是否选中——它只返回文件名（不含路径），且在某些浏览器里清空后可能残留旧值。
移动端点击无响应？检查这些硬性条件
在 iOS Safari 或安卓微信 WebView 里，click() 调用常失效，根本原因是：只有用户**直接手势触发**的事件处理函数里，才能调用 input.click()。JS 异步延迟、定时器、Promise 回调里调用会失败。
- 确保
click()在用户点击按钮的同步回调里执行（如上面示例） - 避免封装成异步函数再调用，例如
async function handleClick() { await delay(10); input.click(); }必然失败 - 不要用
label包裹隐藏 input（虽然语义正确），部分安卓 WebView 对label[for]绑定的click不识别 - 如果用框架（React/Vue），确保事件绑定没被合成事件或异步逻辑干扰
最稳的方式始终是：用户点击 → 同步执行 → input.click()。
