PHP + AJAX 檔案上傳進度條實作：從原理到現成庫推薦

核心原理

傳統 <input type="file"> 提交表單無法獲取進度。現代方案兩大類：

1. XHR2 (XMLHttpRequest Level 2) — 原生 xhr.upload.onprogress 事件，無需外掛，IE10+ 全支援。
2. Fetch API + ReadableStream — 更現代，但進度事件支援較晚 (Chrome 90+)，兼容性略遜。

最小可運行範例 (原生 XHR2 + PHP)

<!-- HTML -->
<input type="file" id="fileInput" multiple>
<button onclick="uploadFiles()">上傳</button>
<div id="progressContainer"></div>

<script>
function uploadFiles() {
    const files = document.getElementById('fileInput').files;
    if (!files.length) return;
    const formData = new FormData();
    for (let f of files) formData.append('files[]', f);

    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'upload.php', true);

    // 進度條 UI
    const container = document.getElementById('progressContainer');
    container.innerHTML = '';
    const bars = [];
    for (let i=0; i<files.length; i++) {
        const wrapper = document.createElement('div');
        wrapper.innerHTML = `${files[i].name}  0%`;
        container.appendChild(wrapper);
        bars.push(wrapper.querySelector('progress'));
    }

    xhr.upload.onprogress = e => {
        if (e.lengthComputable) {
            const pct = Math.round(e.loaded / e.total * 100);
            // 簡單平均顯示總進度，或依檔案索引分配
            bars.forEach((bar, idx) => {
                bar.value = pct;
                bar.nextElementSibling.textContent = pct + '%';
            });
        }
    };

    xhr.onload = () => {
        if (xhr.status === 200) alert('上傳成功：' + xhr.responseText);
        else alert('上傳失敗');
    };
    xhr.send(formData);
}
</script>

<?php
// upload.php
$uploadDir = __DIR__ . '/uploads/';
if (!is_dir($uploadDir)) mkdir($uploadDir, 0755, true);

$resp = [];
foreach ($_FILES['files']['tmp_name'] as $idx => $tmp) {
    $name = basename($_FILES['files']['name'][$idx]);
    $dest = $uploadDir . uniqid() . '_' . $name;
    if (move_uploaded_file($tmp, $dest)) {
        $resp[] = ['name' => $name, 'path' => $dest, 'status' => 'ok'];
    } else {
        $resp[] = ['name' => $name, 'status' => 'error'];
    }
}
header('Content-Type: application/json');
echo json_encode($resp);
?>

生產級推薦庫 (省去手工坑)

常見坑點

• PHP 設定： upload_max_filesize, post_max_size, max_execution_time, max_input_time 需配合大檔調大。
• Nginx/Apache 限制： client_max_body_size (Nginx) / LimitRequestBody (Apache)。
• Session 阻塞： PHP 預設 Session 檔案鎖導致並發上傳卡住，需 session_write_close() 或改用 Redis Session。
• 安全： 驗證 MIME、副檔名、掃毒、重命名存儲、禁止直接訪問上傳目錄。

總結

原生 XHR2 寫進度條不到 50 行，適合輕量需求；專案若涉及大檔、斷點續傳、多框架整合，直接上 Uppy + Tus 或 blueimp，站在巨人肩膀上避坑。