复选框、多选下拉框、文件上传等控件天然支持数组式提交,但必须满足同名name属性和正确enctype或请求构造方式两个前提,否则后端仅收到最后一个值或空字符串。

复选框、多选下拉框、文件上传等控件天然支持数组式提交,但必须满足两个前提:同名 name 属性 + 正确的 enctype 或请求构造方式,否则后端收不到数组,只拿到最后一个值或空字符串。
复选框(input[type="checkbox"])必须显式设 value 且 name 相同
浏览器只提交“被勾选”的复选框,且仅当它们共享同一个 name 时,服务端才会将多个同名参数解析为数组。若漏掉 value,提交的值会是默认的 on,不是业务需要的内容。
-
name必须完全一致,大小写敏感,例如name="category"和name="Category"是两个不同字段 - 未勾选的复选框不会出现在请求中,后端需做“字段缺失即为空数组”的兼容处理
- PHP 接收时用
$_POST['category']直接得到数组;Node.js 的body-parser默认也支持,但 Express 4.16+ 需启用extended: true - 避免给复选框加
required—— 它只校验“是否至少一个被选”,不适用于“全不选也合法”的场景
select[multiple] 提交时 name 后加 [] 是兼容性保险
虽然现代浏览器在 name="colors" 下也能把多选值发成数组,但 PHP 等语言更可靠地识别 name="colors[]" 为数组。不加 [] 时,部分旧版框架或自定义解析器可能只取最后一个选项。
- HTML 中写
<select name="colors[]" multiple>,而非name="colors" - 每个
<option>必须有value,空value=""也会被提交,影响后端判空逻辑 - 如果用 JavaScript 动态设置
selected,记得触发change事件,否则某些库(如 HTMX)可能抓不到最新状态 - 注意:
size属性控制可见行数,不影响提交行为,但影响可访问性(屏幕阅读器依赖它判断是否为多选)
文件上传用 enctype="multipart/form-data" + name="files[]"
普通 application/x-www-form-urlencoded 编码无法传输二进制文件,必须切到 multipart/form-data;而 name="files[]" 能让后端明确收到文件列表,而不是单个文件或覆盖行为。
立即学习“前端免费学习笔记(深入)”;
-
<form enctype="multipart/form-data">是硬性要求,漏掉会导致文件字段在$_FILES或req.files中完全消失 -
<input type="file" name="files[]" multiple>中的[]不是 JS 语法,是 PHP/Python 等语言约定的数组标识符 - 前端用
FormData手动构造时,多次append('files', file)即可,无需加[]—— 这是表单原生提交的约定,FormData本身无此限制 - 大文件上传时,
max_file_size和post_max_size(PHP)或client_max_body_size(Nginx)必须同步调大,否则直接 413 错误
最容易被忽略的是:所有数组型提交都依赖服务端解析器的配置,而不是 HTML 本身。前端写对了 name 和 enctype,只是完成了“正确编码”,真正决定能否收到数组的,是后端是否启用对应解析模式、是否信任该字段名、是否有中间件提前截断或重写请求体。



















