html表单文件上传正常工作的关键在于同时满足三个硬性条件：method="post"、enctype="multipart/form-data"、input必须有name属性，缺一不可，否则后端收不到文件。
HTML表单文件上传控件能正常工作，关键不在 <input type="file"> 本身，而在于它所处的上下文是否满足三个硬性条件：method="POST"、enctype="multipart/form-data"、name 属性存在。缺一不可，否则后端收不到文件。
form 的 enctype 和 method 必须同时设为 multipart/form-data 和 POST
这是最常被忽略的底层前提。浏览器看到 enctype="multipart/form-data" 才会把文件二进制内容按分段格式（boundary）打包；而 method="GET" 根本不支持这种编码——URL 长度和字符集都扛不住。如果只改了 enctype 却漏掉 method="POST"，或者反过来，提交时 request.files（Python Flask）、$_FILES（PHP）或 req.file（Express + multer）一定为空。
- 错误写法：
<form action="/upload" method="GET" enctype="multipart/form-data"></form>→ 浏览器直接忽略 enctype，当普通表单处理 - 正确写法：
<form action="/upload" method="POST" enctype="multipart/form-data"></form> - 注意：即使你用 JavaScript 的
fetch()提交FormData，这个<form></form>标签本身也不需要存在；但若依赖原生表单提交，这两项就是强制配置项
input type="file" 的 name 属性是后端接收字段名的唯一依据
后端解析文件时，不是靠 id 或 label，而是靠 name 值匹配。比如 <input type="file" name="avatar">，Flask 就得写 request.files.get("avatar")，Express + multer 得配 upload.single("avatar")。没有 name，该字段在提交时会被完全丢弃，连空值都不会传过去。
-
id只用于前端 DOM 操作或<label for="xxx"></label>关联，不影响后端接收 - 多文件上传时，
name保持一致（如name="photos"），后端才能拿到FileList或数组形式的多个文件 - 若用
multiple但没设name，浏览器可能只提交第一个文件，或全部丢失
accept 和 multiple 是增强体验的可选属性，非功能必需
accept 只影响文件选择对话框的过滤界面，不阻止用户绕过；multiple 决定能否一次选多个，但两者都不改变传输协议或后端接收逻辑。
-
accept="image/*"会让 Chrome/Firefox 在打开选择框时默认只显示图片，但用户仍可点击“所有文件”强行选 .exe -
accept=".pdf,.docx"比 MIME 类型更可靠，尤其对 Windows 上传场景（MIME 类型常被系统覆盖） -
multiple启用后，input.files是FileList，需遍历处理；后端也要适配接收多个同名字段，不能只取.get("file") - 别把
accept当安全机制——类型校验必须在后端用文件头（magic bytes）+ 扩展名双重验证
隐藏原生 file input 时要注意触发方式和可访问性
很多 UI 会用 CSS 隐藏原生 <input type="file">，再用按钮模拟点击。这时容易踩两个坑：一是某些浏览器（如 Safari）拒绝响应 display: none 或 visibility: hidden 元素的 .click()；二是屏幕阅读器无法感知被隐藏的控件，造成可访问性问题。
- 推荐隐藏方式：
position: absolute; left: -9999px;，保留元素在文档流中且可聚焦 - 触发点击前，确保 input 已挂载到 DOM，且未被
disabled - 务必保留
<label for="xxx"></label>或用aria-label，否则视障用户无法操作 - 不要在
change回调里直接读input.value——它只返回伪路径，要用input.files[0]拿真实File对象
真正卡住人的往往不是语法，而是 enctype 和 name 这两个看似简单却必须精确匹配的点；一旦后端收不到文件，先盯死这两处，比查 JavaScript 逻辑快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
