HTML5中实现本地文件选择的核心是原生元素，支持单/多文件、类型限制（accept）、移动端拍照（capture），可通过FileList读取元数据，结合Drag & Drop和FileReader增强体验，但受安全沙箱限制无法自动触发或预填路径。

HTML5 中实现用户选择本地文件，核心是使用原生 <input type="file"> 元素，它无需额外库或插件，浏览器原生支持，且能直接触发系统文件选择对话框。

基础用法：单文件选择

只需一个带 type="file" 的 input 标签，用户点击即可唤起本地文件选择器：

• 写法简洁：<input type="file" id="fileInput">
• 选中后，document.getElementById('fileInput').files 返回 FileList 对象，其中 files[0] 就是用户选中的第一个文件
• 可立即读取文件名、大小（file.name、file.size）、类型（file.type）等元数据

增强体验：限制类型与多选

通过属性提升可用性，避免用户误选不支持的文件：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• accept="image/*"：仅显示图片类文件（如 JPG、PNG）
• accept=".pdf,.docx"：限定特定扩展名
• multiple：允许一次选择多个文件，files 将包含全部选中项
• capture="user"（移动端）：直接调用前置摄像头拍照上传

进阶控制：拖拽区域替代传统按钮

用 drag & drop API 创建自定义上传区，更直观友好：

• 监听 dragover 和 drop 事件，阻止默认行为防止浏览器打开文件
• 在 drop 事件中获取 e.dataTransfer.files，和 input.files 一样是 FileList
• 可结合 FileReader 实现图片预览，或直接塞进 FormData 发送上传

注意兼容性与安全边界

所有操作都运行在沙箱环境中，前端无法主动读取任意路径文件，只能响应用户明确选择的动作：

• 不能用 JavaScript 自动触发 click() 打开选择框（多数浏览器会拦截）
• 不能通过 JS 设置 input.value 来“预填”文件路径（安全限制）
• Chrome、Firefox、Edge、Safari 现代版本均完整支持；国产信创浏览器需实测 webkitRelativePath 等字段是否可用

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！