html5不提供批量上传功能，仅通过和filelist api支持多文件选择，实际批量上传需用javascript结合formdata与fetch/xhr实现；filelist需转为真数组才能遍历；单请求多文件或并发单文件各适用不同场景；大文件须分片上传防内存溢出；服务端配置（如nginx、中间件）与前后端协议对齐至关重要。
HTML5 本身不提供“批量上传”功能，它只提供 <input type="file" multiple> 和 FileList API，真正的批量上传靠的是 JavaScript 主动组织请求 —— 关键不在标签怎么写，而在你如何用 FormData 和 fetch（或 XMLHttpRequest）把多个文件塞进一个或多个请求里。
如何用 <input type="file" multiple> 正确获取多个文件
很多人以为加了 multiple 就自动“批量”了，其实只是允许选多个，后续仍需手动遍历 files 对象。注意：event.target.files 是只读的 FileList，不是数组，不能直接用 map 或 forEach。
- 必须用
Array.from(event.target.files)或[...event.target.files]转成真数组才能调用数组方法 - 如果用户重复选择相同文件，
FileList会去重（基于文件路径/引用），但不同浏览器行为略有差异，不要依赖此特性 -
accept属性（如accept="image/*,.pdf"）仅作前端过滤提示，后端必须重新校验类型和大小
用 FormData 构建多文件请求的两种常见方式
是否合并到一个请求，取决于后端接口设计。多数场景推荐单请求多文件（减少连接开销），但大文件或需独立进度反馈时，更适合并发单文件请求。
- 单请求多文件：每个
append()使用相同字段名（如"files"），后端收到的是同名文件数组（如 Express 的req.files['files']） - 单请求多文件（带索引）：用
append("files[0]", file)等方式命名，便于后端按序处理 - 并发单文件请求：对每个
File单独构造FormData并fetch，用Promise.allSettled()收集结果，避免一个失败导致全盘中断
const files = Array.from(input.files);
const uploadPromises = files.map(file => {
const formData = new FormData();
formData.append("file", file); // 注意：这里用 "file" 而非 "files"，单个字段
return fetch("/upload", { method: "POST", body: formData });
});
Promise.allSettled(uploadPromises).then(results => {
results.forEach((r, i) => {
if (r.status === "fulfilled") console.log(`✅ ${files[i].name}`);
else console.error(`❌ ${files[i].name}:`, r.reason);
});
});
为什么上传大文件时不能只靠 multiple + FormData
原生 FormData 会把整个文件读入内存（尤其是用 FileReader 预览时），超 500MB 就可能触发浏览器 OOM 或卡死。真实项目中必须引入分片（chunking）和断点续传逻辑。
立即学习“前端免费学习笔记（深入）”；
- 分片依赖
file.slice(start, end)，每次只传一部分，后端需能合并 - 必须计算每片的唯一标识（如文件 hash + 片序号），用于去重和续传判断
- 浏览器原生不提供上传进度事件跨请求聚合，需手动维护总进度（
loaded / total按片加权计算） - 不要用
XMLHttpRequest.upload.onprogress监听单个请求进度后简单相加——并发下无法反映真实完成比例
兼容性与服务端配合的关键点
HTML5 批量上传不是前端独角戏。Chrome/Firefox/Safari 对 FileList 和 fetch 的支持已很稳定，但坑常出在服务端配置和中间件上。
- Nginx 默认限制单次请求体大小（
client_max_body_size），多文件上传必须调大，否则返回 413 - Node.js 的
body-parser不解析multipart/form-data，必须用multer、busboy等专用中间件 - Spring Boot 的
spring.servlet.multipart.max-request-size和max-file-size都要设为足够大 - 若用 WebSockets 或自定义二进制协议上传，
File对象需转为ArrayBuffer或Uint8Array，不能再用FormData
真正卡住项目的往往不是“怎么发起多个上传”，而是分片校验逻辑没对齐、Nginx 悄悄截断了请求、或者后端把 files[] 当字符串解析了。动手前先和后端约定好字段名、分片策略、错误响应格式——比写一百行 JS 更重要。
