AJAX 上傳圖片：頁面重整導致上傳中斷的本質原因

現象

使用 Hellweba 多圖上傳範例，頁面重整後無法繼續上傳，甚至上傳功能完全失效。

根本原因：HTTP 無狀態特性

HTTP 協定是 無狀態 的。上傳過程中，瀏覽器與伺服器維持一條長連線傳輸二進位資料。使用者點擊「重整」或按 F5 時，瀏覽器會 終止所有進行中的請求與連線，包含正在上傳的檔案串流。伺服器端收到斷開訊號，會捨棄已接收的部分資料，導致上傳失敗。

解決策略

1. 防止非預期重整：在 beforeunload 事件提醒使用者上傳進行中。

   window.addEventListener('beforeunload', e => {
       if (uploading) {
           e.preventDefault();
           e.returnValue = '上傳尚未完成，確定離開？';
       }
   });

2. 採用斷點續傳/分片上傳：將大檔切片，每片獨立上傳，重整後可從中斷片繼續（需前端庫如 WebUploader、Uppy 支援）。
3. 背景上傳：使用 Service Worker 或隱藏 iframe 進行上傳，主頁面重整不影響背景任務（現代瀏覽器支援有限）。

最佳實踐建議

• UI 上鎖定上傳區域，顯示進度條與「取消」按鈕，降低使用者誤觸重整機率。
• 上傳完成前禁用表單送出、導航連結。
• 伺服器端實作冪等上傳 API（以檔案雜湊為鍵），支援斷點續傳。