上傳流程

上傳不是「丟個檔案框」就好,要拆成三個清楚的階段:上傳前、上傳中、結果確認。這章講每一態該放什麼、進度與取消怎麼處理、成功與失敗怎麼分開呈現。當你要設計批次上傳、或不確定「上傳到一半使用者離開怎麼辦」時,就翻這頁對一下。

上傳前

這是什麼

拖曳上傳區、支援格式與大小限制說明、選擇檔案按鈕。

什麼時候用

使用者要上傳一個或多個檔案,且尚未開始傳送時。

預覽依本指南規則實作

拖曳檔案至此或選擇檔案

PDF、PNG、JPG · 單檔最大 25 MB · 最多 10 檔

上傳中

這是什麼

每個檔案各自顯示進度條與百分比,並可取消上傳。

什麼時候用

檔案正在傳送中;讓使用者知道進度,必要時可中止。

預覽依本指南規則實作
brief.pdf100%
assets.zip62%

2 / 5 檔案上傳中…

上傳結果確認

這是什麼

上傳結果分開列出成功與失敗項目;失敗可重試,底部有完成或繼續上傳按鈕。

什麼時候用

批次上傳結束後;不要只顯示總成功數,失敗檔案要寫清楚原因。

預覽依本指南規則實作

3 個檔案已上傳

已加入「行銷 Q2」附件

1 個檔案失敗

video.mp4 — 超過 25 MB

規格速查

階段必備元素
上傳前拖放區 +「選擇檔案」按鈕並存;明示格式、單檔大小、最多檔案數
上傳中每檔檔名 + 進度條 + %、可取消單檔;總覽「2 / 5 檔案上傳中」
結果確認成功數 + 簡述、失敗列附原因 + Retry(與成功分開)、完成/繼續上傳
批次列表多檔以列表呈現,逐檔狀態獨立
背景上傳允許離開頁面,完成後以 toast 通知

進度 >10 秒用 determinate(明確百分比)進度條。

常見做錯

做錯正確
上傳中只有轉圈、無進度每檔顯示進度條 + %,>10 秒用明確百分比
上傳中無法取消每檔可單獨取消,不必整批中止
結果不分成功與失敗成功數與失敗列分開呈現,視覺上明確區隔
失敗項目沒有重試失敗列附原因 + Retry,可單檔重試
沒先說明格式與大小限制上傳前就明示格式、單檔大小、最多檔案數

相關章節

  • 上傳與日期選擇 — 拖放區與「選擇檔案」按鈕的元件規則
  • 狀態 — 上傳中、空、錯誤等狀態的通用處理
  • 回饋 — 背景上傳完成的 toast 與進度回饋