HTML上传单个文件核心是：form必须设enctype="multipart/form-data"且method="post"；input type="file"必须有name属性；后端接收字段名须与name值严格一致，否则文件数据无法送达。
HTML 上传单个文件，核心就三点：表单必须设 enctype="multipart/form-data"，<input type="file"> 不能漏掉 name 属性，后端接收字段名要和它一致。
form 的 enctype 属性不能省
浏览器默认用 application/x-www-form-urlencoded 编码表单，这种编码传不了二进制文件。只要表单里有 <input type="file">，就必须显式写：
<form action="/upload" method="post" enctype="multipart/form-data">
漏掉这行，后端（比如 Node.js 的 Multer、Spring Boot 的 @RequestParam("file") MultipartFile）收到的 req.file 或 file 参数一定是 undefined 或空——不是代码写错了，是请求根本没带文件数据。
input 的 name 属性必须和服务端对得上
<input type="file" name="avatar"> 和 <input type="file" name="photo"> 是两回事。后端解析时只认这个 name 值：
立即学习“前端免费学习笔记（深入）”；
- Node.js + Multer：要用
upload.single('avatar')，不是'file' - Spring Boot：
@RequestParam("avatar") MultipartFile file，参数名必须是"avatar" - PHP：
$_FILES['avatar']
常见错误是前端写 name="file"，后端却写 @RequestParam("upload")，两边对不上，文件就“消失”了。
前端校验建议加 size 和 accept
虽然服务端必须做最终校验，但前端拦截能减少无效请求：
-
accept="image/*"或accept=".pdf,.docx"可限制文件类型（仅提示，可绕过） - 用 JS 检查
input.files[0].size，比如超 10MB 就alert("文件太大")并清空input.value = "" - 别依赖
required属性——<input type="file">的required在部分浏览器中行为不一致，优先用 JS 判空
真正容易被忽略的是：移动端 iOS Safari 对 accept 的支持有限，比如 accept="image/*" 可能仍允许选视频；而大文件上传时，若服务端未配好超时或内存限制，请求会静默失败，看不出错在哪。
