<input type="file">是浏览器原生唯一标准上传方式，需插入DOM才可触发click；accept仅前端提示，服务端必须校验真实MIME；读取HTML需监听onload并指定编码；预览应使用sandbox iframe隔离，禁用allow-same-origin防XSS。
HTML 文件上传用 <input type="file"> 就够了
不需要额外库、不用写 JS 也能触发选择文件对话框，<input type="file"> 是浏览器原生支持的唯一标准方式。它默认只允许用户手动点击选择，不能用 JS 自动调起（安全限制），这点很多人一开始会卡住。
常见错误现象：click() 调用无效、表单提交后拿不到文件、控制台报 Failed to execute 'click' on 'HTMLElement': The input element is not in a document。
- 必须确保
<input type="file">已插入 DOM（哪怕display: none也行），不能只创建 JS 对象就调click() - 如果想隐藏原生按钮，用
opacity: 0或position: absolute; left: -9999px，别用visibility: hidden或display: none—— 后者会让click()失效 -
accept属性只起过滤提示作用（比如accept=".html,.htm"），用户仍可手动切到“所有文件”绕过，服务端必须二次校验
限制只能选 HTML 文件：靠 accept + 服务端 MIME 校验
accept 是前端最轻量的筛选手段，但它不阻止非 HTML 文件被选中，也不校验真实内容。浏览器实际依赖文件扩展名和系统注册的 MIME 类型，不可信。
使用场景：用户上传 report.html，但文件头其实是 PDF；或改后缀为 evil.htm 实际是 JS 脚本。
立即学习“前端免费学习笔记（深入）”；
- 前端写法：
<input type="file" accept=".html,.htm,text/html"> - 服务端必须读取文件前几百字节，用
file命令或libmagic类库判断真实 MIME（如text/html），不能只看后缀或Content-Type请求头 - Node.js 示例中常见错：用
req.file.mimetype === 'text/html'判断 —— 这个值来自客户端，可伪造
上传后怎么读取 HTML 内容？别直接 readAsText 就完事
用 FileReader 读取用户选中的 HTML 文件没问题，但要注意编码和解析时机。很多同学读出来是乱码，或者 document.querySelector 报错，其实是没等加载完就操作了。
- 必须监听
reader.onload，在回调里处理reader.result，不是赋值完就立刻用 - HTML 文件若含中文，且未声明
<meta charset>，readAsText默认按 UTF-8 解码可能出错；可显式传参：reader.readAsText(file, 'UTF-8') - 想解析成 DOM？别用
new DOMParser().parseFromString(result, 'text/html')直接塞整个文件 —— 如果 HTML 不规范（比如缺<html>），解析结果可能丢失<head>或脚本上下文
为什么上传完 HTML 不能直接执行里面的 <script>？
这是最容易被忽略的安全雷区。即使你确认文件是 HTML，也不能把它插入页面或用 eval 执行其中脚本 —— 用户上传的 HTML 完全可控，等于给了 XSS 全权限。
- 浏览器对
<script>标签的执行有严格策略：通过innerHTML插入的不会执行；用document.write或eval才会，但都极度危险 - 如果需求是“预览 HTML”，用
<iframe sandbox="allow-scripts">隔离更安全，且禁掉allow-same-origin防止窃取主站 Cookie - Node.js 后端若用
jsdom渲染上传的 HTML，记得设runScripts: "dangerously"并配沙箱，否则默认不执行脚本 —— 但开了就等于主动开洞
真正难的不是怎么上传，是怎么确认它真的是 HTML、没混进别的东西、以及后续怎么安全地对待它。这三个环节漏掉任意一个，上传功能就从便利变成后门。
