在做H5專案的時候，經常會遇到多圖上傳的情況，比如商品評論。
第一次看到這個頁面的心路歷程應該是這樣的：
我如果放四個input[file]在那裡，是可以簡單的做的，但是非常呆，pass。不過要是老闆天天催進度，隨時準備幹完就走，那這種方式是首選！（我經常看到有些培訓班在教這種模式）
言歸正傳，我可以先非同步的把圖片一張一張的傳到伺服器存起來
還有，我可以先把壓縮過的圖片先放在頁面上，點選提交的時候再一起傳過去
一張一張傳
我們先看非同步傳單張的方案，姑且叫方案A吧。我們用文字整理一下流程：
- 放一個隱藏的input[file]在頁面上，監聽“新增圖片按鈕”的點選事件
- 點選觸發檔案選擇，選擇之後把圖片用AJAX傳到服務
- 服務端接收，把圖片存起來，再返回路徑
- 使用路徑生成縮圖，再把路徑放到隱藏的input裡面，等著和其他資料一起提交
部分程式碼示例如下：
這種方案用的過程中會遇到這麼幾個問題：
- 現在好一點的手機動不動就是5M的圖片大小，壞的情況下選擇完圖片之後會有35秒的延遲才能看到縮圖。此時是在等待伺服器接受檔案儲存並返回路徑。
- 刪除圖片的時候需要和後端聯動，點選縮圖右上角的叉叉需要用AJAX去刪除伺服器上的圖片，同時還要刪除HTML結構，增加了程式碼量。最可怕的是有些人每次傳一堆圖，又不提交，直接關閉了頁面。那你的伺服器上就會有一頓沒有資料庫對應的圖片，有潔癖的同學一定注意。
一起傳
再來看壓縮之後一起傳的方案，我們就叫他方案B吧。流程如下：
- 引入webuploader，這是一個由百度開發的外掛，此處用localResizeIMG也是一樣的，只是用來前端處理圖片而已。
- 使用webuploader選擇檔案，生成縮圖，並不上傳。此時的縮圖是一段base64的程式碼。
- 把base64同時放到IMG標籤和INPUT標籤裡
- 提交整個表單的時候一起把圖片儲存了
部分程式碼示例如下：
這種方案目前看來體驗很好，而且排序問題也可以直接在前端解決，由於圖片進行了壓縮，一次性提交的時候也不會有延遲。最大的問題也許就是在某些老舊安卓機上會讓瀏覽器無響應，應該是把手機瀏覽器的記憶體給佔滿了，不過也是極端使用的情況。
其實方案A也可以先用localResizeIMG將圖片壓縮再非同步上傳，效果和B方案基本相同。那麼情況就變成：
- 如果你有伺服器潔癖，請選擇方案B
- 如果你的客戶群體手機都不太好，請選擇方案A
其他情況就看你的喜好吧