1.文件如何上傳

a.把圖片轉(zhuǎn)化為base64位上傳到服務(wù)器(使用getBase64Image()方法把圖片轉(zhuǎn)化為base64位格式)
b.使用input標(biāo)簽進(jìn)行上傳(那么如何上傳呢,客官請繼續(xù)往下看)

2.怎么寫

 <input id="images" name="file" type="file" multiple accept="image/gif,image/jpeg,image/jpg,image/png" />

看完代碼之后會問,multiple 與accept屬性是干嘛的呢,其實(shí)accept屬性是規(guī)定上傳數(shù)據(jù)類型的,上傳數(shù)據(jù)類型/數(shù)據(jù)格式,multiple 是規(guī)定用戶是否可以選擇多個文件進(jìn)行上傳.
知道了上傳文件的標(biāo)簽了,那到底應(yīng)該怎么傳呢?看官別急,且聽我細(xì)細(xì)道來

3.怎么傳

第一步:獲取input的files屬性
第二步:創(chuàng)建FormData對象,吧file添加到FormData對象中
第三步:通過ajax上傳FormData對象

4.拓展

正常的開發(fā)需求,我們一般要對文件的大小進(jìn)行限制,顯示圖片的名字,上傳圖片要加一些預(yù)覽等功能,此時我們就要知道File對象與FileReader了
a.File對象
File對象提供了name,type,size方法包括了上傳文件的名字,類型與大小
b.FileReader讀取文件內(nèi)容
具體方法如下

var file = document.getElementById('file').files[0];//獲取file對象
            if (file) {
                var reader = new FileReader();//創(chuàng)建FileReader對象
                reader.onload = function (event) {
                    var txt = event.target.result;//上傳圖片的url
                    var img = document.createElement("img");
                    img.src = txt;
                    document.getElementById("result").appendChild(img);
                };
            }
            reader.readAsDataURL(file);//將讀取到的文件編碼成Data URL

5.遇到的坑

當(dāng)我們把a(bǔ)ccpet設(shè)置為accpet="image/"時,Chrome總會出現(xiàn)卡段問題,當(dāng)我把a(bǔ)ccpet="image/改為accpet="image/jpg時,就不會有卡頓問題啦,通過百度發(fā)現(xiàn),是谷歌的SafeBrowsing對文件進(jìn)行了檢查.具體原因就是,當(dāng)我們對SafeBrowsing白名單之外的文件格式進(jìn)行上傳時,SafeBrowsing會對文件進(jìn)行檢查,此時就出現(xiàn)上傳任務(wù)被掛起(js單線程嘛,不理解的可以看看js的事件循環(huán)),此過程會持續(xù)到SafeBrowsing任務(wù)結(jié)束或者超時,此時文件進(jìn)行上傳.
解決辦法:升級瀏覽器或者對文件類型進(jìn)行細(xì)化.