原生 是 html 文件上传的唯一必需起点，需配合 formdata 和 fetch（post）手动上传，注意字段名匹配、禁设 content-type、服务端解析配置及文件头校验。
HTML 文件上传用 <input type="file"> 就够了
不需要额外库、不依赖框架，原生 <input type="file"> 是唯一必须的起点。它本身不发请求，只负责选文件；后续上传动作（比如用 fetch 或 XMLHttpRequest）得自己写。
常见错误是以为加个 form + submit 就算“实现上传”——其实只是触发了浏览器默认表单提交，服务端收不到结构化数据，前端也难控制进度、校验或取消。
-
accept属性要写对，比如只允许 HTML 文件：accept=".html,.htm"（注意点不能少，text/html在部分浏览器不生效） - 必须加
multiple才能多选，否则每次只能挑一个 -
capture在移动端会强制调用摄像头/相册，和 HTML 文件无关，别乱加
用 fetch 上传 HTML 文件要构造 FormData
直接把 File 对象扔给 fetch 会报错：TypeError: Request with GET/HEAD method cannot have body —— 因为没指定方法，或没包装成可发送格式。
正确路径是：监听 input 的 change 事件 → 取出 files[0] → 塞进 FormData → 用 POST 发出去。
立即学习“前端免费学习笔记（深入）”；
部分功能简介：商品收藏夹功能热门商品最新商品分级价格功能自选风格打印结算页面内部短信箱商品评论增加上一商品，下一商品功能增强商家提示功能友情链接用户在线统计用户来访统计用户来访信息用户积分功能广告设置用户组分类邮件系统后台实现更新用户数据系统图片设置模板管理CSS风格管理申诉内容过滤功能用户注册过滤特征字符IP库管理及来访限制及管理压缩，恢复，备份数据库功能上传文件管理商品类别管理商品添加/修改/
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async (e) => {
const file = e.target.files[0];
if (!file) return;
const formData = new FormData();
formData.append('html_file', file); // 字段名要和服务端约定一致
try {
await fetch('/upload', { method: 'POST', body: formData });
} catch (err) {
console.error('上传失败:', err);
}
});
服务端收不到文件？检查 Content-Type 和字段名
用 FormData 提交时，浏览器自动设置 Content-Type: multipart/form-data; boundary=...，你**绝不能手动设置这个 header**，否则后端解析器会直接丢弃 body。
Node.js（Express）常见坑：req.body 永远为空，因为文件不在 body 里，在 req.files（需用 multer）或原始流中；Python Flask 默认也不处理 multipart，得用 request.files.get('html_file')，字段名必须和前端 formData.append() 里的第一个参数完全一致。
- 字段名大小写敏感，
'Html_File'和'html_file'是两个东西 - 如果服务端返回
400 Bad Request且日志提示“no file part”，大概率是字段名不匹配 - Nginx 默认限制上传大小（通常是 1MB），传大一点的 HTML（比如含 base64 图片）会静默失败，需调
client_max_body_size
上传前校验 HTML 文件内容比扩展名更可靠
仅靠 accept=".html" 或检查 file.name.endsWith('.html') 很容易绕过——用户改个后缀就能上传任意二进制文件。
真要防误传，读取文件头几个字节判断是否含 /code> 或 <code> 更实在，但注意：小文件可以全读，大文件建议只读前 2KB。
const reader = new FileReader();
reader.onload = (e) => {
const content = e.target.result.substring(0, 2048);
if (!/<html|!doctype/i.test(content)) {
alert('这不是有效的 HTML 文件');
return;
}
// 继续上传
};
reader.readAsText(file);
这步容易被跳过，尤其在内部工具里——结果某天有人上传了 report.pdf 改名成 index.html，服务端解析失败，又查不出原因。
