可直接触发原生文件选择框；需显式声明type、用multiple支持多选、accept仅提示类型、files为只读FileList、须用change事件监听、隐藏时禁用display:none而用opacity:0。
用 <input type="file"> 实现基础文件选择框
直接写 <input type="file"> 就能触发系统原生文件选择对话框，不需要 JS 也能工作。浏览器会自动处理点击、过滤文件类型（默认不限）、返回文件路径（仅文件名，出于安全不暴露完整路径）。
常见错误是忘记加 type="file"，写成 <input> 或 <input type="text"> —— 这样只会弹出普通文本框，根本不会打开文件选择器。
- 必须显式声明
type="file"，其他 type 值无效 - 默认只允许选单个文件；如需多选，加
multiple属性 - 提交表单时，
<input type="file">的值不会作为普通表单字段发送，需配合enctype="multipart/form-data"和后端接收逻辑
限制可选文件类型：用 accept 属性过滤
accept 不是校验手段，只是给系统文件选择器的提示，用户仍可手动切换到“所有文件”并绕过。它影响的是对话框右侧的文件类型下拉菜单，默认显示哪些扩展名或 MIME 类型。
示例：<input type="file" accept="image/png,image/jpeg,.pdf"> 会让 macOS Finder 或 Windows 文件对话框优先展示 PNG/JPEG/PDF 文件。注意：accept 支持 MIME 类型（如 image/*）和带点的扩展名（如 .docx），但不支持通配符扩展名（如 *.log）。
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
-
accept="image/*"匹配所有图片类型（但不含 SVG，部分浏览器不识别image/svg+xml） -
accept=".xlsx,.xls"比accept="application/vnd.ms-excel"更可靠，因 MIME 判断依赖客户端系统注册信息，易失效 - 移动端 Safari 对
accept支持较弱，比如accept="video/*"在 iOS 上可能不生效，需额外 JS 检查files[0].type
获取选中文件信息：读取 input.files FileList 对象
input.files 是只读的 FileList，类似数组但不是 Array，不能直接用 map 或 forEach。常用属性有 length、[0]、item(0)；每个 File 对象含 name、size、type（MIME）、lastModified。
典型误操作：直接对 input.files 调用 Array.from() 或展开运算符（[...input.files]）在旧版 Safari（≤16.4）会失败，应改用 Array.prototype.slice.call(input.files) 或循环遍历。
- 监听变化必须用
change事件，input事件不触发（因为文件选择不是“输入”行为） - 清空已选文件只需赋值
input.value = ""，不要尝试input.files = null（只读报错） -
input.files在表单重置（form.reset()）后自动清空，无需手动干预
样式定制难点：隐藏原生 input，用 label + CSS 模拟按钮
原生 <input type="file"> 样式几乎无法通过 CSS 直接修改（如 button 文字、边框、宽度），主流解法是将其透明度设为 0 并覆盖在自定义按钮上，靠 <label for="id"></label> 关联触发。
关键点：label 必须正确绑定 for（对应 input 的 id），且 input 不能 display:none（否则 Safari 会禁用点击），推荐用 position: absolute; opacity: 0; width: 1px; height: 1px; 隐藏。
- 不要用
display: none或visibility: hidden，会导致部分 Android 浏览器无法触发选择器 - 移动端点击区域要足够大（至少 44×44px），避免
opacity: 0后用户点不到 - 如果用 JS 动态创建 input 并 append 到 body，记得设置
id并同步更新 label 的for，否则点击无效
accept 的兼容性差异和 input.files 的类型转换陷阱——尤其在需要批量上传又兼顾老 iOS 的场景，建议始终用循环而非数组方法处理 FileList。 
