纯HTML文件上传只需<form enctype="multipart/form-data">包裹<input type="file">，缺一不可；accept和multiple可选，但后端校验不可少；大文件需调服务端配置，否则413错误静默发生。
用 <input type="file"> 就够了，不需要 JS 也能上传
纯 HTML 实现文件上传，核心就是 <input type="file">。它本身不发送请求，但配合 <form> 提交就能走传统表单上传流程，几行代码即可跑通。
常见错误是只写 <input type="file"> 却没包在 <form> 里，或者漏掉 enctype="multipart/form-data" —— 这个属性一旦缺失，后端根本收不到文件字段，$_FILES（PHP）或 request.files（Python Flask）会为空。
-
<form method="POST" enctype="multipart/form-data">必须显式声明enctype -
<input type="file" name="myfile">的name值决定后端接收的字段名 - 加
multiple属性可选多个文件：<input type="file" name="files" multiple> - 限制类型可用
accept="image/*,.pdf"，但只是浏览器提示，不替代后端校验
后端接收时注意 Content-Type 和边界符解析
表单提交后，HTTP 请求体是 multipart/form-data 类型，带随机生成的 boundary 分隔符。主流后端框架（如 Express、Flask、Django）都内置了解析逻辑，但前提是：你没用 fetch 或 axios 发送 JSON 请求——那会把文件转成字符串，后端收不到二进制流。
也就是说，只要坚持用原生表单提交，就不用操心 boundary 解析；一旦切到 JS 提交，就得手动构造 FormData 对象，并确保不覆盖 Content-Type（让浏览器自动设）。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 错误写法：
fetch("/upload", { headers: { "Content-Type": "application/json" } })→ 文件直接丢弃 - 正确写法：
const fd = new FormData(); fd.append("file", input.files[0]); fetch("/upload", { method: "POST", body: fd }) - Node.js + Express 需要
multer中间件；Python Flask 默认支持request.files
input[type="file"] 的样式限制和绕过方案
浏览器对 <input type="file"> 的 UI 控制极严，不能直接改按钮样式（比如圆角、背景色），::file-selector-button 伪元素支持有限，Safari 目前还不认。
最稳的实操方案是「透层遮罩」：把原生 input 设置为 opacity: 0、绝对定位盖在自定义按钮上，点击区域穿透到它，同时监听 change 事件同步显示文件名。
- 别用
display: none或visibility: hidden，会导致 iOS Safari 失去响应 - 监听
input的change事件比click更可靠（防止取消选择后状态不同步） - 文件名过长建议截断：
input.files[0]?.name.slice(0, 20) + "..."
小文件直传够用，大文件必须分片或配超时
原生表单上传没有进度反馈、无法暂停、失败就得重来。小于 10MB 的头像/文档上传完全没问题；但传视频或压缩包时，容易卡住或触发 Nginx/PHP 的默认超时（比如 Nginx 的 client_max_body_size 1m 或 PHP 的 upload_max_filesize = 2M）。
这时候不是前端代码精简的问题，而是服务端配置和协议选型问题。如果真要“几行代码”撑住大文件，至少得调两个关键配置：
- Nginx：加
client_max_body_size 512m到 server 块 - PHP：改
upload_max_filesize和post_max_size（后者需 ≥ 前者） - 不改配置的话，
413 Request Entity Too Large错误会静默发生，前端只看到请求卡死
真正需要断点续传或秒传，那就超出“几行 HTML”的范畴了——得引入分片、MD5 检查、后台合并逻辑，精简不等于省事。
