multiple属性仅对type="file"和type="email"生效：前者支持真多选并生成filelist，后者仅放宽校验、需手动分割字符串，且不改变ui或键盘行为。

multiple 属性在 <input> 上只对 type="file" 和 type="email" 两种类型生效，但行为完全不同：前者真能一次选多个文件，后者只是放宽校验、允许手动输入多个邮箱字符串——它不会自动拆分、不返回数组、也不影响 UI。

为什么 input[type="email"][multiple] 不能真正“多选”邮箱

浏览器根本不会为 type="email" 弹出多邮箱选择器或添加“+邮箱”按钮。加了 multiple 后，用户仍只能在一个文本框里手动输入，比如：alice@example.com, bob@test.org。关键点：

• input.value 拿到的是完整字符串，不是数组；必须用 .split(/[,;\s]+/) 手动切分
• 空格、逗号、分号都算分隔符，但浏览器不做去重、去空、格式校验——"a@b.c, , @d.e" 也能通过 required
• 移动端软键盘毫无变化，iOS Safari 甚至会把逗号当普通字符处理，不触发邮箱键盘优化
• 表单提交时，整个字符串作为单个字段发给后端，后端必须自己解析

input[type="file"][multiple] 怎么正确读取和上传多个文件

加了 multiple 后，input.files 是一个 FileList 对象，不是数组，也不能直接用 .value —— 那只会返回第一个文件名或空字符串。

Free Ride - Unlimited free AI

一款AI工具，主要用于管理 OpenClaw 所使用的来自 OpenRouter 的免费 AI 模型。自动按质量对模型进行排序，配置回退机制以应对速率限制，并更新 opencla...，适合需要提升相关任务效率的用户。

下载

• 必须用 Array.from(input.files) 或 for (const file of input.files) 遍历
• 每个 File 对象有 name、size、type，但没有路径（file.path 永远是 undefined）
• 上传时要用 FormData.append('files', file) 循环调用，不能传 input.files 整体——否则 Chrome 和 Firefox 行为不一致
• 如果用户重复选同一个文件，FileList 里会出现两个相同 name 的项，需前端去重（按 name + size + lastModified 判断）

哪些地方容易误用 multiple

这个属性被滥用最多的地方，就是把它当成“通用多值开关”。事实是：

• <input type="text" multiple>：完全无效，浏览器忽略，JS 读不到任何额外能力
• <input type="email" multiple>：布尔属性不接受值，写了反而被当成 true
• <select multiple></select>：这是 <select></select> 自己的属性，和 <input> 的 multiple 无关，别混在一起理解
• 以为 accept + multiple 能阻止非法类型：accept 只过滤文件选择弹窗里的可见项，用户仍可绕过粘贴或拖入任意文件

最常被忽略的一点：即使写了 multiple，iOS Safari 在 16.4 之前根本不支持多选，Android 厂商定制系统也可能阉割该功能——如果你的目标用户包含大量旧机型，得准备降级方案，比如允许多次单选并合并 FileList。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！