关键在于设置multiple布尔属性，无需赋值；input.files是只读FileList，需转为数组才能调用map等方法；FormData上传多文件须用同一键名多次append或带序号键名，不可手动设Content-Type。
如何用 <input type="file"> 一次性选多个文件
关键不是“实现多文件上传”，而是让浏览器允许用户一次选中多个文件——这完全取决于 multiple 属性是否正确设置。没有它，<input type="file"> 默认只接受单个文件。
常见错误是写了 multiple="true" 或 multiple="multiple"，其实只要存在该属性即可，布尔属性无需赋值：
<input type="file" id="fileInput" multiple>
注意：accept 属性可配合使用（如 accept="image/*,.pdf"），但它不影响多选能力，仅过滤文件类型提示；部分移动端浏览器对 accept 支持有限，不能依赖它阻止非期望类型上传。
input.files 是什么，为什么不能直接当数组用
input.files 返回的是 FileList 对象，不是真正的 Array，所以不能直接调用 .map()、.forEach() 等方法。强行调用会报 TypeError: input.files.map is not a function。
立即学习“前端免费学习笔记（深入）”；
必须先转成数组才能批量处理：
const files = document.getElementById('fileInput').files;
const fileArray = Array.from(files); // 推荐：语义清晰，兼容性好
// 或
const fileArray = [...files]; // ES6 展开语法，简洁但低版本 Safari 需注意
-
FileList是只读类数组，索引访问（files[0]）有效，但长度固定 - 用户取消选择后，
files.length会变为0，但对象本身不销毁 - 不要试图修改
files内容（如files.push()），无效且无提示
用 FormData 提交多个文件的正确姿势
每个文件必须作为独立字段追加到 FormData 中，否则后端只能收到最后一个。常见错误是反复用同一个键名（如 append('file', file)），导致覆盖。
有两种稳妥方式：
✅ 方式一：统一字段名，后端接收为数组（主流框架如 Express、Django、Spring Boot 均支持）
const formData = new FormData();
for (const file of fileArray) {
formData.append('files', file); // 注意键名是 'files'，不是 'file'
}
✅ 方式二：带序号的字段名（适合需要严格顺序或单独校验的场景）
fileArray.forEach((file, i) => {
formData.append(`file_${i}`, file);
});
- 不要手动设置
Content-Type头——fetch或XMLHttpRequest发送FormData时会自动设为multipart/form-data并带上正确 boundary - 如果用
fetch，禁止写headers: {'Content-Type': '...'}，否则会破坏 multipart 结构 -
file.name、file.size、file.type可在前端做基础校验（如大小超 10MB 跳过）
为什么上传大文件时进度条不动，或者报错 Network Error
这不是 HTML5 文件 API 的问题，而是请求被中断或服务端未正确处理流式上传。前端能做的只有合理分片和监听，但前提是后端支持。
纯 FormData 上传不支持断点续传，大文件失败率高。若真要支持 >100MB 文件，必须考虑：
- 前端切片：用
file.slice(start, end)分块，每块单独发请求 - 后端需提供合并接口，并记录已上传分片（靠文件 hash 或唯一 ID 关联）
- 浏览器限制：某些环境（如 iOS WebView）对单次
fetch体积极其敏感，超 50MB 可能静默失败 - 别忽略
onerror和onabort回调——它们比catch更早捕获底层网络异常
多数业务场景下，“多文件” ≠ “超大单文件”。优先优化小文件并发上传（加 Promise.all 控制并发数），比硬啃分片简单可靠得多。
