可触发本地文件选择，但需监听change事件、检查files.length、通过FileReader读取内容，禁用value获取路径；支持multiple、accept等属性增强控制。
直接用 <input type="file"> 就能触发本地文件选择，但要真正拿到文件、避免踩坑，得注意几个关键点。
基础写法与触发方式
只需一行 HTML：
-
<input type="file">渲染为“选择文件”按钮，点击后弹出系统原生文件对话框 - 用户选中并确认后，不会自动上传，只是把文件引用存进内存，需用 JavaScript 主动读取或提交
- 不加任何属性时，默认只允许选单个文件
常用增强属性
按需添加这些属性提升体验和控制力：
-
multiple：支持一次选多个文件（input.files变成含多个File的列表） -
accept：提示浏览器过滤类型（如accept="image/*,.pdf"），但不是强制限制，用户仍可手动切换为“所有文件” -
capture：移动端专用，capture="user"强制调用前置摄像头，capture="environment"调用后置 -
webkitdirectory directory：允许用户选择整个文件夹（Chrome / Edge 支持较好，Firefox 和 Safari 有限或不支持）
怎么安全可靠地获取文件信息
别看 input.value —— 它显示的是 C:\fakepath\xxx，这是浏览器故意屏蔽真实路径的安全机制，不可信。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
真正可用的信息全在 input.files 里：
-
input.files[0]是第一个选中的File对象（单选时用这个） -
input.files.length才是实际选中数量（多选时必须先检查是否 > 0） - 每个
File实例有可靠属性：name（文件名）、size（字节大小）、type（MIME 类型）、lastModified（时间戳）
监听与读取的正确姿势
绑定 change 事件是唯一可靠的时机：
- 用
click或input事件都不可靠，它们可能在未确认前就触发 -
change只在用户真正点“打开”或“选取”后才触发 - 典型处理流程：监听 change → 检查 files.length → 创建 FileReader → 调用 readAsDataURL() 或 readAsText() 等方法
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
