通過JQ上傳圖片base64數(shù)據(jù)應(yīng)該注意的事項(xiàng)
當(dāng)我們使用JQ的AJAX進(jìn)行圖片base64數(shù)據(jù)上傳時(shí)會(huì)遇到幾個(gè)常見問題，下面列出幾條應(yīng)該注意的事項(xiàng)：
1，應(yīng)去掉圖片頭如：“data:image/jpeg;base64,”，在轉(zhuǎn)換圖片base64數(shù)據(jù)時(shí)會(huì)自動(dòng)在前面加上圖片信息，如“data:image/png;base64,”、“data:image/jpg;base64,”、“data:image/jpeg;base64,”、“data:image/gif;base64,”、“data:image/bmp;base64,”等等，我們應(yīng)該去掉這些才能保存圖片，在上傳前客戶端或者上傳后服務(wù)端處理都行。
2，AJAX傳輸時(shí)會(huì)自動(dòng)把內(nèi)容里的“+”自動(dòng)轉(zhuǎn)換成空格，在上傳前我們應(yīng)該將“+”符號(hào)進(jìn)行編碼。
完整客戶端代碼：var localData0 = res.localData; // localData是圖片的base64數(shù)據(jù)，可以用img標(biāo)簽顯示
var localData =localData0.replace(/^.*?,/,''); // 去掉各類圖片頭
var localData = localData.replace(/\+/g, "%2B"); // 把+替換成編碼 %2B是加號(hào)的編碼
$.ajax({ //通過ajax來(lái)將base64數(shù)據(jù)發(fā)送給服務(wù)器端
url:"topic.php",
data:{'localData':localData}, //localData為圖片已經(jīng)轉(zhuǎn)換好的base64編碼
type:"post",
dataType: "text",
async:false,//false表示異步執(zhí)行,true同步
success:function(res){
var text = document.getElementById("picurl").＆#118alue; //取出picurl之前的值
var text1= text+","+res; //多圖上傳時(shí)的多圖片路徑拼合
document.getElementById("picurl").＆#118alue=text1; //上傳成功后返回圖片路徑賦值給picurl
},
});
然后服務(wù)器端就可以將圖片base64數(shù)據(jù)保存為圖片了，具體代碼百度很多。
慶中秋迎國(guó)慶輕云網(wǎng)站優(yōu)惠大促銷 奇億網(wǎng)站建設(shè)公司關(guān)于中秋節(jié)國(guó)慶節(jié)的放假通知 阿里云服務(wù)器超低價(jià)促銷2核4G三年699元 帶參數(shù)微信小程序二維碼的生成方法 新互聯(lián)時(shí)代網(wǎng)站建設(shè)的價(jià)值淺談 奇億迎五一云網(wǎng)站買二年送一年活動(dòng)！ 大數(shù)據(jù)時(shí)代下的網(wǎng)站運(yùn)營(yíng)方式 網(wǎng)站怎樣做差異化的運(yùn)營(yíng)？ 網(wǎng)站建設(shè)中頁(yè)面導(dǎo)航的四大類型 淺談網(wǎng)站建設(shè)與seo的密切關(guān)系 符合SEO規(guī)則的網(wǎng)頁(yè)設(shè)計(jì)應(yīng)做到“七不要” 客戶主動(dòng)找上門是堅(jiān)持做seo的最好理由 如何避免千篇一律的網(wǎng)站運(yùn)營(yíng)方式？ 軟文推廣寫好優(yōu)質(zhì)原創(chuàng)的三要素 網(wǎng)站排名與流量之間的關(guān)系 論網(wǎng)站原創(chuàng)內(nèi)容究竟該不該被保護(hù) 增加吸引力的軟文推廣技巧 淺談網(wǎng)站索引頁(yè)面建立的意義 收錄與快照在不同搜索引擎中的區(qū)別 網(wǎng)站建設(shè)時(shí)如何給網(wǎng)站設(shè)置驗(yàn)證碼？復(fù)制本文《通過JQ上傳圖片base64數(shù)據(jù)應(yīng)該注意的事項(xiàng)》地址給好友：
