HTML表单Input类型为File的切片上传逻辑在HTML层级的实现设计实战

File input 的 multiple 属性不是必须但强烈建议开启，否则用户每次只能选一个文件，打断批量上传流程；开启后可一次选择多个文件并各自独立切片。

File input 的 multiple 属性是否必须开启才能分片？

不是必须，但强烈建议开启。单个 <input type="file"> 默认只选一个文件，即使你手动切片上传，用户每次只能选一个文件——这会打断批量上传流程。加 multiple 后，用户一次可选多个文件，每个文件再独立切片，逻辑更自然。

注意：开启 multiple 后，input.files 返回的是 FileList（类数组），不是单个 File 对象，遍历前要先确认长度：

const files = input.files;
for (let i = 0; i < files.length; i++) {
  const file = files[i]; // 每个 file 都是 File 实例，可 slice()
}

• 不加 multiple 也能切片，但仅限单文件场景，扩展性差
• File 对象本身支持 slice() 方法（兼容 IE10+、所有现代浏览器），无需额外 polyfill
• 别用 input.value 判断是否选中文件——它只返回文件名（且路径被浏览器屏蔽），应始终用 input.files.length > 0

如何在 HTML 层控制文件选择范围与大小限制？

HTML 层不能做真正的“切片”，但能提前过滤掉明显不合规的文件，减少无效 JS 处理和后续请求失败。关键靠 accept 和 JS 配合校验。

accept 控制类型（如 accept="image/*,.pdf"），但它是提示性而非强制——用户仍可通过“全部文件”绕过。真正有效的拦截得靠 JS：

立即学习“前端免费学习笔记（深入）”；

input.addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (file && file.size > 500 * 1024 * 1024) { // 500MB
    alert('文件超过 500MB，请压缩或分卷');
    e.target.value = ''; // 清空 input，否则下次 change 不触发
  }
});

• accept 值不要写死 MIME 类型如 application/octet-stream，部分浏览器不识别；优先用扩展名或通用类型（image/*）
• 移动端 Safari 对 accept 支持较弱，依赖 JS 校验更可靠
• 文件大小限制必须在 JS 中检查，HTML 的 max 属性对 type="file" 无效

切片时要不要在 HTML 层暴露进度条或暂停按钮？

要，但必须用原生语义化方式，避免纯 p 模拟导致无障碍失效。核心是两个元素：<progress> 和带 formnovalidate 的按钮。

<progress value="30" max="100"></progress> 是语义化进度指示器，屏幕阅读器可识别；暂停/取消操作应绑定到 <button type="button">，并确保其 disabled 状态同步更新：

<progress id="upload-progress" max="100"></progress>
<button type="button" id="pause-btn" disabled>暂停</button>

• 不要用 <p class="progress-bar"> 替代 <progress>，它对辅助技术不可见
• 暂停功能实际由 JS 控制 abort() 或中断当前 chunk 请求，HTML 层只提供可交互入口
• 切片上传过程中，input 应保持 disabled 状态，防止用户重复点击触发新上传

为什么 FileReader 读取大文件容易卡住？怎么规避？

因为 FileReader.readAsArrayBuffer() 是同步读取整个文件块到内存，1GB 文件切 10MB/片，也要一次性加载 10MB ArrayBuffer —— 浏览器可能直接卡死或触发内存警告。

正确做法是用 Blob.slice() + fetch() 直传，绕过 FileReader：

const chunk = file.slice(start, end); // 返回新 Blob，不读入内存
fetch('/upload', {
  method: 'POST',
  body: chunk,
  headers: {
    'Content-Range': `bytes ${start}-${end-1}/${file.size}`,
    'X-File-Name': file.name,
    'X-Chunk-Index': i
  }
});

• 只要服务端支持接收 raw Blob，就完全不需要 FileReader —— 这是现代切片上传的推荐路径
• 若必须用 FileReader（比如需要前端计算 MD5），务必限制单次读取大小（≤8MB），并用 setTimeout 分批读取，避免阻塞主线程
• FileReader 的 onload 回调里，this.result 是 ArrayBuffer，别直接转成字符串处理，尤其对二进制文件

切片上传真正的复杂点不在 HTML 标签本身，而在于如何让表单控件的状态（选中、禁用、反馈）与 JS 的异步切片生命周期严格对齐——漏掉一次 input.disabled = true 或忘记重置 progress.value，用户就会看到“上传中”却点不了任何按钮。