multiple属性仅对type="file"有效，其他类型无效；需用input.files获取文件列表，配合FormData.append逐个添加上传；务必前置校验大小与类型，并注意重复文件去重。
multiple 属性只对 type="file" 有效
其他 type 值（比如 text、email）加了 multiple 完全没作用，浏览器会忽略。只有 <input type="file" multiple> 才能触发多选文件行为——这是最常被误用的点。
注意：即使加了 multiple，用户仍可单选；它只是「允许」多选，不是「强制」多选。
- Chrome / Edge / Firefox / Safari（macOS 12.3+）都支持，但旧版 Safari（iOS 15.4 之前）不支持拖拽多文件，仅支持按住 Cmd/Ctrl 点击选择
-
accept属性可以配合使用，比如accept="image/*,.pdf"，但它只过滤弹窗里的文件类型，不能阻止用户绕过界面手动输入非法后缀 - 移动端部分 Android 浏览器（如 Samsung Internet）可能只允许一次选一个，即使写了
multiple
获取多个文件要用 files 属性，不是 value
input.value 对于多文件上传永远只返回第一个文件名（或空字符串），毫无意义。真正要读的是 input.files——它是一个 FileList 对象，类似数组但不是 Array。
常见错误写法：input.value.split(',') 或 Array.from(input.value)，这根本拿不到文件内容或大小。
立即学习“前端免费学习笔记（深入）”；
- 正确访问方式：
input.files[0]、input.files.item(0)、或转成数组处理：Array.from(input.files) -
input.files是只读的，无法手动 push 或赋值，也不能用forEach（需先转数组） - 每个
File对象包含name、size、type、lastModified，但不含路径（出于安全限制，file.path在所有现代浏览器中均为undefined）
上传多个文件推荐用 FormData.append() 逐个添加
不要试图把整个 FileList 直接塞进 FormData。虽然 formData.append('files', input.files) 在部分浏览器中“看似”能工作，但行为不一致：Chrome 可能发成一个字段含多个文件，Firefox 可能只传第一个。
稳妥做法是遍历并为每个文件单独 append，服务端才能稳定接收为同名字段的多个值（如 PHP 的 $_FILES['files']['name'][0]）。
- 示例：
const formData = new FormData(); for (const file of input.files) { formData.append('files', file); // 同名 key，后端收为数组 } - 如果后端要求区分字段名（如
file1、file2），就用formData.append(`file${i}`, file) - 别忘了在
fetch或XMLHttpRequest中省略Content-Type头——浏览器会自动设置带 boundary 的multipart/form-data
大文件或多文件时务必加校验和反馈
用户勾选 20 个 500MB 视频再点上传，前端不拦截，等十几秒后才报 413 Request Entity Too Large，体验极差。校验必须前置。
- 检查总大小：
Array.from(input.files).reduce((sum, f) => sum + f.size, 0)，超过阈值（如 2GB）直接提示并return - 检查单个文件类型：用
file.type或file.name.split('.').pop().toLowerCase()做简单后缀判断（注意type可能为空，如本地 txt 文件） - 上传中显示进度：
XMLHttpRequest.upload.onprogress可监听单个请求，但多个文件需自己聚合；fetch暂无原生进度支持，得靠ReadableStream分块读取重写逻辑
最易被忽略的是：用户重复选择同一文件（比如两次点同一个图片），input.files 里会出现两个相同 name 和 size 的 File 对象，但它们是不同引用——去重必须靠 lastModified + size + name 组合比对，不能只看 name。
