必须用enctype="multipart/form-data"且所有字段同属一个，因浏览器按表单边界收集数据，跨表单无法混合提交文件与文本；缺enctype则文件被静默丢弃，文本若不在该表单内亦不会发送。
必须用 enctype="multipart/form-data"，且所有字段（含文本）都得在同一个 <form></form> 内——跨表单提交文件和文本混合数据本身不成立，浏览器只按表单边界收集数据。
为什么不能“跨表单”提交文件+文本
浏览器提交时，每个 <form></form> 是独立的数据容器。哪怕两个表单 DOM 位置紧挨着，只要没被同一个 <form></form> 包裹，它们的 name 就互不感知。文件字段缺 enctype="multipart/form-data" 会被静默丢弃；文本字段若不在该表单内，则根本不会出现在请求体中。
常见错误现象：
- 后端收到空
$_FILES或request.files，但$_POST或request.form有值 → 文本和文件分属不同表单 - Network 面板里 Form Data 只显示文本键值，无文件条目 → 表单漏了
enctype - 选了文件但提交后
input[type="file"].files.length === 0→ 表单被 JS 重置或重复渲染覆盖了 DOM 引用
enctype="multipart/form-data" 是强制前提
这个属性不是可选项，是 multipart 请求的开关。没有它，<input type="file"> 的二进制内容不会被编码进请求体，后端连“有文件”这件事都不知道。
立即学习“前端免费学习笔记（深入）”；
关键点：
- 必须写在
<form></form>标签上，不能靠 JS 动态补 —— 浏览器在点击 submit 时就已根据该属性决定编码方式 - 即使表单里只有 1 个文本框 + 1 个文件输入，也必须设，
application/x-www-form-urlencoded无法携带文件 - PHP 中漏掉它，
$_FILES全为空数组；Flask 中request.files为 ImmutableMultiDict({})
如何正确组织混合字段（文件 + 文本）
所有要一起提交的字段，必须物理上位于同一对 <form></form> 标签内。表格布局不影响逻辑，但容易让人误以为 <tr> 或 <code><td> 有提交作用域。
<p>正确结构示例：</p>
<pre class="brush:php;toolbar:false;"><form action="/upload" method="post" enctype="multipart/form-data">
<table>
<tr>
<td><label>昵称</label></td>
<td><input type="text" name="nickname"></td>
</tr>
<tr>
<td><label>头像</label></td>
<td><input type="file" name="avatar"></td>
</tr>
<tr>
<td colspan="2"><button type="submit">上传</button></td>
</tr>
</table>
</form></pre>
<p>注意：</p>
<ul><li>
<code><form></form> 必须包裹整个 <table>（或至少包裹所有 <code>input/textarea 和提交按钮）
name 属性，否则后端收不到 —— <textarea name="bio"></textarea> 没 name 就等于不存在<input type="button"> + JS fetch 来“模拟”，除非你明确需要控制流程；原生 submit 更可靠、兼容性更好多个混合表单共存时的命名隔离
如果页面上有多个需同时上传文件+文本的表单（如“改头像”和“传合同”），它们可以并存，但必须各自独立：
- 每个
<form></form>都要带enctype="multipart/form-data"和method="post" - 各表单的
<input type="file">的name值不能重复，比如一个用name="avatar"，另一个用name="contract_pdf" - 后端接收时，PHP 用
$_POST['avatar_note']+$_FILES['avatar']；Flask 用request.form.get('contract_title')+request.files['contract_pdf'] - JS 绑定事件时，务必用
event.target.closest('form')定位所属表单，避免document.querySelector('input[name="avatar"]')一把抓错对象
最易忽略的是：iOS Safari 在旧版本中对 multiple 的支持是 per-input 的，不是 per-form 的 —— 如果你在同一个表单里放两个 multiple 文件输入，第二个可能被忽略，别迷信“多字段=多文件”。
