h5中无法真正离线选择文件，但可通过service worker缓存页面、用filereader读取文件后存入indexeddb（arraybuffer或分片）、监听online事件自动续传来实现离线缓存与网络恢复后上传。
在 H5 中无法真正“离线选择文件”——文件选择（<input type="file">）本身必须在在线或离线状态下都能触发，但关键在于：用户选完文件后，若此时无网络，需立即将文件（或其分块）存入 IndexedDB，并记录上传状态；待网络恢复时自动读取并续传。
1. 离线时能正常调起文件选择器
HTML 文件选择不受网络状态影响，只要页面已加载（即 Service Worker 已控制或资源已缓存），<input type="file"> 就可正常使用：
- 确保页面本身支持离线访问（通过 Service Worker 缓存 HTML/JS/CSS）
- 不要在
change回调里直接发起网络请求；先做本地处理 - 选中后立即读取文件（用
FileReader或ArrayBuffer），避免后续离线时无法再读取File对象（它只在当前上下文有效）
2. 将文件内容存入 IndexedDB（推荐存 ArrayBuffer）
File 对象不能直接存进 IndexedDB，需转为可存储类型（如 ArrayBuffer、Blob 或分片后的二进制数据）：
- 用
file.arrayBuffer()获取完整 ArrayBuffer（适合小文件，≤50MB） - 大文件建议分片（如每片 1MB），每片单独存为一条记录，附带
fileId、chunkIndex、totalChunks、uploaded字段 - 在 Object Store 中额外保存元数据（文件名、类型、大小、时间、上传状态等）
- 示例存储结构：
{ id: 'f_abc123', name: 'report.pdf', type: 'application/pdf', size: 12456789, status: 'pending', chunks: [{ index: 0, data: ArrayBuffer, uploaded: false }, ...] }
3. 监听网络状态，自动触发续传
不依赖定时轮询，用更轻量、可靠的方式响应联网事件：
- 监听
window.addEventListener('online', handler)—— 页面切回在线时触发 - 结合
navigator.onLine初次检查，避免 onload 时已是 online 却漏触发 - 续传逻辑应从 IndexedDB 查出所有
status === 'pending'或uploaded: false的记录 - 按顺序上传分片（注意服务端是否支持断点续传 + 合并逻辑），成功后更新对应 chunk 的
uploaded: true，最后标记整个文件为status: 'completed'
4. 补充要点：可靠性与体验优化
- 上传前校验 IndexedDB 中数据完整性（如 ArrayBuffer 长度是否匹配原始 size）
- 添加上传队列和重试机制（失败时标记
retryCount，指数退避重试） - 用户关闭页面前，用
beforeunload尽量完成当前 chunk 存储（但不要阻塞） - 提供 UI 反馈：“已缓存，等待上传”、“正在续传（2/5）”、“上传完成”
- 注意 Safari 对 IndexedDB 的限制（如私有模式下可能禁用，需降级到 localStorage + Base64（仅极小文件））
