上傳與日期選擇

檔案上傳與日期選擇是後台最常做錯的兩個 input:上傳常漏掉進度與錯誤處理,日期選擇器常只給日曆逼人狂點。這章把兩者的雙模式輸入、限制提示與錯誤處理講清楚。當你要做上傳區或日期欄位時,就翻這頁對一下。

檔案上傳(File Upload)

這是什麼

同時支援拖曳檔案到虛線區與按鈕選檔;每個檔案顯示上傳進度,成功或失敗各有明確回饋。

什麼時候用

表單、設定頁需要上傳附件、頭像或匯入檔案時。

預覽依本指南規則實作

拖曳檔案至此

或點擊瀏覽

Max 25 MB · PDF, PNG, JPG · Up to 10

design-spec.pdf (2.3 MB)
logo.png (450 KB)78%

video.mp4 — File too large (50 MB, max 25 MB)

同時提供兩種觸發

  1. Drag-drop 區(虛線框 + 圖示)。
  2. Select files 按鈕(鍵盤 / 行動裝置)。

上傳前

明確告知最大大小、格式、最大檔案數。

上傳中/後

每檔 filename + progress + 取消;失敗顯示原因 + Retry。

日期選擇器(Date Picker)

這是什麼

可手動輸入日期,也可點日曆圖示選取;區間選擇附「今天、近七天」等快捷預設。

什麼時候用

報表篩選、排程、有效期等需要選單日或日期區間時。

預覽依本指南規則實作

Preset

March 2026
SuMoTuWeThFrSa

同時提供兩種輸入

  1. Typed input(locale 格式)。
  2. Calendar popover(點 icon 開啟)。

Date Range

From + To;提供 Today、Last 7 days、This month 等 preset。

A11y

方向鍵移動、PageUp/Down 切月、Enter 選取、Esc 關閉。

規格速查

項目定稿值
Upload 觸發拖放區 + 「選擇檔案」按鈕,兩者都要(a11y/行動裝置)
Upload 限制提示上傳前顯示最大大小、接受格式、最大檔案數
Upload 進度每檔即時 progress bar;多檔再加整體進度條
Upload 失敗紅 icon + 失敗原因 + Retry + Remove 按鈕
Upload 多檔多檔列表,各檔可取消/移除
Date picker 模式輸入框 + 日曆 popover 雙模式,不可只給日曆
Date picker locale格式與第一天依 locale,用 Intl.DateTimeFormat,勿 hardcode
Date picker 限制min/max 不可選日期 disabled + cursor not-allowed
Range picker 快捷提供 preset:今天、近 7 天、近 30 天、本月等

常見做錯

做錯正確
上傳無進度、無錯誤處理顯示即時進度,失敗給原因 + Retry/Remove
不顯示檔型與大小限制上傳前就標明最大大小、接受格式、檔數
Date picker 只能點日曆不能輸入同時提供 typed input,避免狂點找年份
日期格式 hardcode 不 locale 化依 locale 決定格式與第一天,用 Intl 處理

相關章節

  • 表單 — 上傳與日期欄位的 label、驗證與錯誤訊息規則
  • 新增/編輯頁 — 表單頁中這兩個 input 的擺放位置
  • 上傳流程 — 多檔上傳的整頁流程與背景上傳處理