17370845950

关键在于设置multiple布尔属性，无需赋值；input.files是只读FileList，需转为数组才能调用map等方法；FormData上传多文件须用同一键名多次append或带序号键名，不可手动设Content-Type。

如何用 一次性选多个文件

关键不是“实现多文件上传”，而是让浏览器允许用户一次选中多个文件——这完全取决于 multiple 属性是否正确设置。没有它， 默认只接受单个文件。

常见错误是写了 multiple="true" 或 multiple="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/fo

  

  rm-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 控制并发数），比硬啃分片简单可靠得多。