multiple属性仅对type="file"有效,其他类型无效;需通过input.files读取filelist对象,上传时须循环调用formdata.append()同key多次添加文件。

multiple 属性只对 type="file" 有效,其他类型加了也没用
很多人以为 multiple 是个“通用多选开关”,给 type="text" 或 type="email" 加上就能输入多个值——其实浏览器直接忽略。它只在 <input type="file" multiple> 下才真正起作用。写成 <input type="file" multiple> 反而会被当成 true(布尔属性不接受值),<input multiple> 缺少 type="file" 也无效。
用户怎么选多个文件?不同系统操作方式不一样
加了 multiple 后,用户得自己按系统习惯多选,浏览器不会自动弹出“多选界面”:
- Windows:按住 Ctrl 点击单个文件,或按住 Shift 框选连续文件
- macOS:按住 Cmd 点击
- 桌面 Chrome/Firefox/Edge:支持直接拖拽多个文件到
<input>区域(需监听drop事件才能捕获) - iOS Safari:16.4 之前基本不支持,点开仍是单选;16.4+ 才开始有限支持
- 微信安卓 WebView:很多版本会静默降级为单选,
e.target.files.length始终为 1
JavaScript 必须读 input.files,别碰 input.value
input.value 只返回第一个文件的伪造路径(如 C:\fakepath\abc.jpg),完全不能反映多选结果。真正承载全部文件的是只读的 FileList 对象:
- 检查是否选中:
input.files.length === 0(注意:用户点取消对话框,files不会清空,仍为上次值) - 转成真数组处理:
Array.from(input.files)或[...input.files],之后才能用map、forEach - 每个
File实例有name、size、type、lastModified,但没有path(file.path永远是undefined) - 重复选同一个文件?
FileList里会出现两个条目,前端需按name + size + lastModified去重
上传时 FormData.append() 必须同 key 多次调用
后端收不到全部文件?90% 是这里错了。错误写法:formData.append('file', files) —— 这会把整个 FileList 当一个 Blob 传,且多数后端只认最后一个。正确做法是循环调用:
const formData = new FormData();
for (const file of files) {
formData.append('files', file); // key 用复数名 'files',不要加 []
}
这样生成的 multipart 请求中,files 字段会出现多次,后端才能解析为数组:
- Express:需配合
upload.array('files')中间件,取req.files.files - PHP:
$_FILES['files']['name']是数组 - Flask:
request.files.getlist('files')
调试时打开 Network 面板,确认 Request Payload 里列出的是多个 files 条目,而不是只有一个。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











