<input type="file">点击失效主因是样式覆盖或层级遮挡，需设父容器position: relative且input的z-index足够高；accept仅提示过滤类型，校验须JS处理；multiple下files为FileList，需Array.from()转换；拖拽上传必阻止dragover和drop默认行为；预览用URL.createObjectURL()后须revokeObjectURL()防内存泄漏。
用 <input type="file"> 时为什么用户点不到？
常见原因是样式覆盖或层级遮挡——比如用 opacity: 0 隐藏原生控件后，没给父容器设 position: relative，导致点击区域偏移；或者用 z-index 错误地压住了它。
- 确保包裹层有
position: relative，且<input>的z-index足够高（哪怕只是1） - 别用
display: none或visibility: hidden隐藏原生控件，它们会让click()失效 - 推荐用
opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%覆盖在自定义按钮上
accept 和 multiple 怎么配才不翻车？
accept 不是校验器，只是提示浏览器过滤文件类型；用户仍可手动绕过。真正校验得靠 JS 读取 files 列表后的 file.type 或扩展名。
-
accept=".pdf,.docx"比accept="application/pdf"更可靠，因为不同系统对 MIME 类型识别不一致 - 开启
multiple后，event.target.files是FileList，不是数组，要用Array.from()转换才能用filter、map - 大文件批量上传时，记得限制
files.length，否则用户一次选 500 张图会卡死界面
拖拽上传（dragover/drop）的坑在哪？
最常被忽略的是：不阻止 dragover 默认行为，浏览器就拒绝接收拖入的文件；而 drop 事件里如果没调 preventDefault()，页面会直接跳转到文件地址。
element.addEventListener('dragover', (e) => {
e.preventDefault(); // 必须！否则 drop 不触发
});
element.addEventListener('drop', (e) => {
e.preventDefault(); // 必须！否则打开文件
const files = e.dataTransfer.files;
handleFiles(files);
});
- 只监听
drop不够，必须同时监听dragenter和dragleave来加/去“可投放”样式 -
e.dataTransfer.files和input.files类型一致，可共用处理逻辑 - 移动端不支持拖拽，别把它当唯一入口
上传前预览图片/文本，怎么避免卡顿和内存泄漏？
用 URL.createObjectURL() 生成预览 URL 最快，但不手动释放会导致内存持续增长；而用 FileReader 读取内容更可控，适合校验或提取元信息。
立即学习“前端免费学习笔记（深入）”；
- 预览图建议限制尺寸：
canvas绘制缩略图再转toDataURL()，避免原图撑爆内存 - 每次新选文件前，先调
URL.revokeObjectURL(oldUrl)清理旧引用 - 文本类文件（如
.log、.csv）用readAsText()，但要设encoding参数，否则中文乱码
复杂点在于：用户反复上传又取消，FileReader 的 abort() 很难精准控制，不如用 AbortController 包一层；而预览缩略图的 canvas 渲染节奏，得配合 requestIdleCallback 避免阻塞主线程。
