官網『檔案上傳／拖拉上傳』(File Upload / Drag & Drop) 設計完整攻略：中小企業如何用一個小小的上傳區塊，把客戶的『我先給你參考檔案』變成成交起點

「檔案傳 LINE 給我就好。」——這句話你是不是也在跟客戶對話時說過？

問題是，客戶傳到 LINE 的檔案，三天後就被其他對話擠掉；業務手機換一支，過去的參考檔案通通不見；同一個專案的圖檔、報價、規格書散在四、五個聊天視窗裡，要找的時候比翻抽屜還痛苦。更慘的是，客戶要傳個 200MB 的產品影片給你參考，LINE 傳到一半直接失敗，於是他就懶得傳了——那筆案子的第一步，就這樣不了了之。

其實這個問題早該被官網解掉。一個做得好的「檔案上傳區塊」，可以讓客戶在填詢問單、報價需求、專案 brief、履歷應徵時，直接把手邊的參考檔案拖進來、按送出。檔案自動歸戶到那筆詢問、附在 CRM 資料上、寄到你信箱，不會再有「檔案在哪」這種問題。

這篇文章要來聊，中小企業官網要怎麼把這個看似很技術的元件做對，讓它從「有比沒有好」變成「客戶願意主動附檔的成交起點」。

Photo by Growtika on Unsplash

為什麼中小企業官網「一定」要有像樣的檔案上傳

很多老闆會覺得：「我們又不是雲端硬碟，網站放個上傳幹嘛？直接叫他 email 或 LINE 給我就好啦。」但如果你的生意有任何一項符合下面這幾種，你就非有不可：

第一，你要接需要參考檔案才能報價的案子。像是印刷業要客戶傳設計稿、裝潢設計要客戶傳空間平面圖、翻譯社要客戶傳文件、SEO 公司要客戶傳現有網站截圖或關鍵字表——沒檔案，你連報價都報不了。

第二，你在做徵才。104 已經越來越貴，官網的「加入我們」頁如果能直接讓求職者拖履歷、作品集、代表作進來，你就能省一筆刊登費，還能收到 104 收不到的高階被動求職者。

第三，你在做會員服務或售後。老客戶要退換貨，需要拍瑕疵照；要理賠，需要傳收據；要維修，需要傳故障影片——這些如果都靠客服 LINE 一張一張要，光整理就吃掉半個下午。

第四，你想接國外案子。海外客戶不會用 LINE，Gmail 附件超過 25MB 就要走雲端硬碟連結，來回麻煩到讓對方乾脆放棄。官網直接一個上傳區塊，全世界通用。

重點一：拖拉不是花俏，是效率

2026 年了，還在做「按這裡選擇檔案 → 開啟檔案總管 → 一個一個點」的網站，已經算是資訊落後。滑鼠使用者更習慣「從桌面直接拖進來」，尤其是要一次傳好幾張圖的時候。

做拖拉上傳，其實不難。標準的 UI 是一塊有虛線邊框的方形區塊，中間寫「將檔案拖到這裡，或點擊選擇」，游標拖過去時邊框變色、背景微微變亮，告訴使用者「這裡可以放」。拖進來的瞬間再給一個微微跳動的動畫，確認被接收。這種微互動不是為了炫，是為了讓客戶知道「有反應」，沒反應會讓人以為壞掉、關掉分頁走人。

提醒一點：拖拉區塊本身也要能點擊。手機使用者不能拖，只能點；電腦使用者有時懶得拖，也會點。做成「拖或點都可以」是基本，不要為了拖拉的酷炫就把點擊選檔藏起來。

重點二：檔案類型、大小、數量，先寫在畫面上

這是最多網站踩雷的地方。使用者上傳一個 60MB 的檔案，等了一分鐘才跳「檔案過大」，會讓人瞬間想砸螢幕。或者他傳 .heic（iPhone 拍照預設格式），你的後端不支援卻沒說，客戶不知道要怎麼處理。

正確的做法是在上傳區塊下方、或按鈕旁邊，用小字直接寫清楚：

「支援 JPG、PNG、PDF、DOC，單檔最大 20MB，最多 5 個檔案。」

就這麼一行，可以省掉九成的「傳一半失敗、客戶氣走」情境。如果你的服務會收特殊格式（AI 檔、PSD、DWG、STEP），更要標明，因為客戶會擔心「我這個檔你們收得下嗎？」

比較體貼的做法還可以加：「格式不對？告訴我們你的檔案類型」——直接引導到聯絡表單，把「無法上傳」轉化成一次接觸機會，而不是直接讓客戶走人。

Photo by 2H Media on Unsplash

重點三：多檔上傳、進度條、可刪除，三件事缺一不可

如果你的表單需要客戶傳超過一個檔案（幾乎所有 B2B 情境都是），這三件事就是基本盤：

1. 多檔一次選：檔案總管按 Ctrl（Mac 是 Cmd）多選一次全丟進來，不要逼客戶一次一個上傳。

2. 每檔獨立進度條：檔案越大，進度條越重要。沒有進度條的上傳就像被卡在馬桶——你不知道還要等多久、不知道有沒有在動。看到 30%、60%、85% 一路跑，就算跑十秒也不會焦慮。

3. 可以刪掉重來：選錯檔案、想換一張、傳到一半後悔，都應該有個 ✕ 按鈕可以按。特別是拖拉多檔的時候，很容易把桌面的雜檔一起丟進來，沒有刪除功能就等於逼客戶重整頁面。

加分項是檔案預覽：上傳的如果是圖片，直接顯示縮圖；如果是 PDF/DOC，顯示檔名、大小、副檔名圖示。客戶一眼就能確認「我傳對了」，這種安全感能大幅減少「送出後又寫信問你有沒有收到」的來回。

重點四：失敗要說得明白，別只寫「上傳失敗」

使用者看到「上傳失敗」四個字，腦子只會出現三個字：「怎樣啦？」

好的錯誤提示會直接告訴你原因和下一步：

• 「檔案超過 20MB 上限，請壓縮後再試，或改傳雲端連結。」
• 「這個格式（.heic）我們暫時無法處理，請轉存成 JPG 或 PNG。iPhone 用戶可以在『設定 → 相機 → 格式』改成『相容性最高』。」
• 「網路連線中斷，已幫你保留其他檔案，請重新上傳這一個。」

寫錯誤訊息這件事，是很多網站最沒用心的環節。花十分鐘把常見錯誤都寫成人話，可以省下每個月不知道多少客服來回。

更進階的做法是失敗自動重試。網路瞬斷、Wi-Fi 切換、手機從 4G 跳 Wi-Fi，都是很常見的中途失敗。有些前端套件（例如 Uppy、Filepond、Resumable.js）內建斷點續傳，可以在網路恢復後從中斷的地方接著傳，這對大檔案來說是救命功能。

重點五：手機版要允許直接拍照或從相簿選

台灣有七成以上的官網流量來自手機。手機上填表單傳檔案，最常見的情境不是「我早就準備好一個檔案」，而是「現在馬上拍一張傳給你」——像是拍瑕疵、拍收據、拍現場、拍名片。

技術上這件事只是一行 HTML：<input type="file" accept="image/*" capture="environment">，加了 capture 屬性，手機點下去會直接叫出相機而不是相簿。

更完整的做法是給客戶選擇：

• 拍照上傳
• 從相簿選擇
• 從雲端硬碟選擇（Google Drive、iCloud）

「從雲端選擇」這個功能可以直接接 Google Picker API 或 Dropbox Chooser，讓客戶不必先下載到手機、再上傳到你網站——多一個步驟就多一個放棄的機會。

Photo by Zulfugar Karimov on Unsplash

後端與資安：老闆最容易忽略、但一出事就出大事

檔案上傳做得漂亮沒用，如果後端沒防好，隨便一個懂點技術的人上傳一支 PHP 木馬，你的網站就會被拿去挖礦、放釣魚頁、寄垃圾信。這件事在 WordPress 世界特別常見，我們自己接過好幾個客戶都是這樣中招。

幾個最基本、不做會出事的原則：

1. 白名單，不要黑名單。只允許你指定的副檔名（例如 jpg、png、pdf、docx），其他一律擋掉。而不是「除了 .php、.exe 之外都可以」——攻擊者永遠可以找到你沒想到的副檔名。

2. 檢查真正的檔案類型，不要只看副檔名。把 hack.php 改名成 photo.jpg 是最基本的手法。後端要用 magic number（檔頭）判斷實際格式，或者用 ImageMagick 之類的工具重新處理過一次。

3. 上傳目錄不要能執行程式。Nginx / Apache 的設定要把上傳資料夾禁止 PHP 執行，就算真的有惡意檔案上去也跑不起來。

4. 檔名重新命名。不要用使用者的原始檔名（可能含中文、特殊字元、甚至 XSS 攻擊字串），統一改成時間戳＋隨機字串，例如 1785527056934-abc123.jpg。

5. 檔案大小要在後端再擋一次。前端的檔案大小限制可以被繞過，後端一定要有第二道防線，不然攻擊者可以塞爆你的硬碟。

6. 敏感檔案不要放在網站根目錄底下。如果客戶傳的是個資、合約、財務文件，這些不應該可以透過網址直接下載。要放在網站可讀但無法對外訪問的位置，透過權限驗證的下載連結才給看。

檔案傳完之後，別讓它躺在硬碟裡等發霉

最後一個常被忽略的環節：檔案傳上來之後怎麼處理？

很多網站做完上傳就沒下文了——客戶傳了、按了送出、你網站收到了，但你根本不知道；等你隔天登入後台看，才發現有五筆待處理的詢問。這樣的體驗跟客戶用 LINE 傳給你，其實沒差多少。

把上傳流程做完整，應該長這樣：

• 客戶上傳完 → 立刻收到「我們已收到您的檔案，工作日 8 小時內回覆」的自動回覆 email，附上他的檔名清單當佐證。
• 系統立刻寄一封通知到你的信箱或 LINE，附上檔案下載連結。
• 檔案自動歸戶到那筆詢問單／客戶資料／專案編號底下，未來所有歷史一目了然。
• 如果超過設定時間（例如 4 小時）沒人處理，自動 escalate 給主管。

這一整套流程做起來其實不困難，用 Formidable Forms、Contact Form 7 + Zapier、或者我們比較常用的客製化後台，都可以在幾天內串起來。差別就在——客戶下次還會不會回來找你。

結語：一個小上傳區塊，藏著中小企業的接單效率

檔案上傳從來不是什麼酷炫的網站功能，但它偏偏就是那種——沒做好，客戶會默默流失；做好了，客戶會覺得「你們家真的滿專業」。

如果你的官網現在還沒有像樣的上傳區塊，或者上傳體驗停留在 2015 年的「按選擇檔案 → 等」，這個週末花兩個小時檢查一下你的詢問單、履歷收集、報價需求表單——把上面說的五個重點對照一下，能改的先改，不能改的排進下個月的維護清單。

不用一次做到滿分，能先做到「拖拉可上傳＋清楚寫格式限制＋收到後自動回覆」，就已經勝過八成中小企業的官網了。

需要幫忙評估或改造官網的檔案上傳流程，歡迎跟我們聊聊，我們可以先幫你看看現在的表單有沒有踩到常見的坑。