大文件上傳（1GB+）斷點續傳：基於 XMLHttpRequest + Blob 切片實現

核心流程

1. 前端 `File` 對象調用 `slice(start, end)` 切片。
2. `FormData` 追加切片，`XMLHttpRequest` 發送。
3. 後端 PHP 拼接臨時文件，全部完成後合併重命名。
4. 前端記錄已上傳切片索引，支持暫停/續傳/刷新恢復。

關鍵前端代碼

const BLOB_SIZE = 2 * 1024 * 1024; // 2MB/片
async function uploadLargeFile(file) {
    const totalChunks = Math.ceil(file.size / BLOB_SIZE);
    for (let i = 0; i < totalChunks; i++) {
        const start = i * BLOB_SIZE;
        const end = Math.min(start + BLOB_SIZE, file.size);
        const chunk = file.slice(start, end);

        const formData = new FormData();
        formData.append('file', chunk);
        formData.append('chunkIndex', i);
        formData.append('totalChunks', totalChunks);
        formData.append('fileName', file.name);

        // 同步發送保證順序，或用 Promise.all 併發配合後端校驗
        await sendChunk(formData);
        updateProgress((i + 1) / totalChunks * 100);
    }
    await mergeChunks(file.name); // 通知後端合併
}

function sendChunk(fd) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open('POST', 'upload.php', true); // 異步
        xhr.onload = () => xhr.status === 200 ? resolve() : reject(xhr.statusText);
        xhr.onerror = () => reject(xhr.statusText);
        xhr.send(fd);
    });
}

瀏覽器兼容性要求

• File API / Blob.slice / FormData / XMLHttpRequest Level 2：IE10+、Chrome、Firefox、Edge 全支持。
• IE9 及以下**不支持**，需降級方案或提示用戶升級。

後端要點

• 臨時目錄存儲 `filename.part.N`。
• 合併時按索引順序 `file_put_contents($dest, file_get_contents($part), FILE_APPEND)`。
• 校驗 MD5/完整性，防止切片丟失或損壞。

生產級建議

直接使用成熟庫：Resumable.js、Uppy、WebUploader，已處理並發控制、斷點記憶、錯誤重試、UI 組件等細節。