問題描述
在做觸屏項(xiàng)目的時(shí)候憔鬼，經(jīng)常會(huì)遇到多圖上傳的情況歉甚，比如商品評(píng)論洋只。
第一次看到這個(gè)頁(yè)面的心路歷程應(yīng)該是這樣的：
我如果放四個(gè)input[file]在那里样眠，是可以簡(jiǎn)單的做的割笙，但是非常呆权烧，pass。不過要是老板天天催進(jìn)度伤溉，隨時(shí)準(zhǔn)備干完就走般码，那這種方式是首選！（我經(jīng)陈夜耍看到有些培訓(xùn)班在教這種模式）
言歸正傳板祝，我可以先異步的把圖片一張一張的傳到服務(wù)器存起來
還有，我可以先把壓縮過的圖片先放在頁(yè)面上走净，點(diǎn)擊提交的時(shí)候再一起傳過去
方案分析
我們先看異步傳單張的方案券时，姑且叫方案A吧。我們用文字整理一下流程：
放一個(gè)隱藏的input[file]在頁(yè)面上伏伯，監(jiān)聽“添加圖片按鈕”的點(diǎn)擊事件
點(diǎn)擊觸發(fā)文件選擇橘洞，選擇之后把圖片用AJAX傳到服務(wù)
服務(wù)端接收，把圖片存起來说搅，再返回路徑
使用路徑生成縮略圖震檩，再把路徑放到隱藏的input里面，等著和其他數(shù)據(jù)一起提交
部分代碼示例如下：
這種方案用的過程中會(huì)遇到這么幾個(gè)問題：
現(xiàn)在好一點(diǎn)的手機(jī)動(dòng)不動(dòng)就是25Md的圖片大小蜓堕，壞的情況下選擇完圖片之后會(huì)有35秒的延遲才能看到縮略圖抛虏。此時(shí)是在等待服務(wù)器接受文件保存并返回路徑。
刪除圖片的時(shí)候需要和后端聯(lián)動(dòng)套才，點(diǎn)擊縮略圖右上角的叉叉需要用AJAX去刪除服務(wù)器上的圖片迂猴，同時(shí)還要?jiǎng)h除HTML結(jié)構(gòu)，增加了代碼量背伴。最可怕的是有些人每次傳一堆圖沸毁，又不提交，直接關(guān)閉了頁(yè)面傻寂。那你的服務(wù)器上就會(huì)有一頓沒有數(shù)據(jù)庫(kù)對(duì)應(yīng)的圖片息尺，有潔癖的同學(xué)一定注意。
再來看壓縮之后一起傳的方案疾掰，我們就叫他方案B吧搂誉。流程如下：
引入webuploader，這是一個(gè)由百度開發(fā)的插件静檬，此處用localResizeIMG也是一樣的炭懊，只是用來前端處理圖片而已并级。
使用webuploader選擇文件，生成縮略圖侮腹，并不上傳嘲碧。此時(shí)的縮略圖是一段base64的代碼。
把base64同時(shí)放到IMG標(biāo)簽和INPUT標(biāo)簽里
提交整個(gè)表單的時(shí)候一起把圖片保存了
部分代碼示例如下：
這種方案目前看來體驗(yàn)很好父阻，而且排序問題也可以直接在前端解決愈涩，由于圖片進(jìn)行了壓縮，一次性提交的時(shí)候也不會(huì)有延遲加矛。最大的問題也許就是在某些老舊安卓機(jī)上會(huì)讓瀏覽器無響應(yīng)履婉，應(yīng)該是把手機(jī)瀏覽器的內(nèi)存給占滿了，不過也是極端使用的情況荒椭。
總結(jié)
其實(shí)方案A也可以先用localResizeIMG將圖片壓縮再異步上傳，效果和B方案基本相同舰蟆。那么情況就變成：
如果你有服務(wù)器潔癖趣惠，請(qǐng)選擇方案B
如果你的客戶群體手機(jī)都不太好，請(qǐng)選擇方案A
其他情況就看你的喜好吧
以上內(nèi)容屬于作者原創(chuàng)身害，特此聲明味悄，如需轉(zhuǎn)載，請(qǐng)留言取得同意
