HTML与iframe之间大文件分片上传的配合教程-html教程-PHP中文网

iframe不能直接参与分片上传，因其无file对象访问权、无法调用slice()、不暴露upload.onprogress，仅可作为ie9等老浏览器的整片fallback载体，分片逻辑必须由主页面js实现。

html与iframe之间大文件分片上传的配合教程

iframe 不能直接参与分片上传 —— 它没有 access to File 对象、无法调用 slice()、不暴露 XMLHttpRequest.upload.onprogress，强行塞进去只会卡死或降级成整传。

iframe 是一个独立的文档上下文，它只接收最终拼装好的 HTML 响应，不参与原始文件读取、切片、并发控制等前端逻辑。所有“iframe 分片上传”的说法，本质是混淆了「上传载体」和「上传控制层」：

真正执行分片的是主页面 JS：用 FileReader 或 ArrayBuffer 读取文件，调用 file.slice(start, end) 切块，再通过 fetch 或 XMLHttpRequest 发送每一片
iframe 只可能被用作「兜底 fallback」：当浏览器不支持 FormData（如 IE9）时，把单个分片包装成表单提交到 iframe，但此时已失去进度、重试、断点能力
若后端要求每个分片都带 session 或 token，iframe 提交无法动态注入 header，只能靠 hidden input 拼参数，极易过期或泄露

分片上传必须逐片构造 FormData，常见错误是误将整个 File 对象 append 进去，而不是 slice 后的 Blob：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

❌ 错误写法：formData.append('chunk', file) → 传整文件，失去分片意义
✅ 正确写法：formData.append('chunk', file.slice(0, 4 * 1024 * 1024), 'part_0') → 显式指定字节范围
iframe fallback 场景下，form.submit() 会忽略手动设置的 Content-Type，后端必须能解析 multipart/form-data 边界中的 filename 和自定义字段（如 chunk_index、total_chunks）
IE10+ 支持 FormData，但 IE11 对 Blob 构造有 bug：用 new Blob([arrayBuffer]) 可能丢失 type，建议统一用 file.slice() 获取子 blob

当必须兼容老浏览器（如 IE9），可设计双通道上传逻辑：主流程走 XHR 分片，失败时自动切换 iframe 表单提交单片（非真正分片，而是“伪分片”）：

主页面监听 file input，生成唯一 upload_id 并存入 sessionStorage
每片请求携带 upload_id、chunk_index、total_chunks 等字段，后端据此合并
iframe fallback 时，动态创建 <form target="upload-iframe"></form>，action 拼接 ?upload_id=xxx&chunk_index=0，用 hidden input 补全其余元数据
iframe 加载完成时，通过 window.parent.postMessage 通知主页面：“第 0 片已提交”，主页面再发下一片 —— 注意 iframe 无状态，无法感知网络失败，需加超时重试
关键限制：iframe 模式下无法获取上传进度，<progress></progress> 只能模拟（如按 chunk_index / total_chunks 计算）