通過JQ上傳圖片base64數(shù)據(jù)應(yīng)該注意的事項

發(fā)布日期：[2018/9/26] 編輯：奇億廣州網(wǎng)站建設(shè)

當(dāng)我們使用JQ的AJAX進(jìn)行圖片base64數(shù)據(jù)上傳時會遇到幾個常見問題，下面列出幾條應(yīng)該注意的事項：

1，應(yīng)去掉圖片頭如：“data:image/jpeg;base64,”，在轉(zhuǎn)換圖片base64數(shù)據(jù)時會自動在前面加上圖片信息，如“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傳輸時會自動把內(nèi)容里的“+”自動轉(zhuǎn)換成空格，在上傳前我們應(yīng)該將“+”符號進(jìn)行編碼。

完整客戶端代碼：var localData0 = res.localData; // localData是圖片的base64數(shù)據(jù)，可以用img標(biāo)簽顯示 var localData =localData0.replace(/^.*?,/,''); // 去掉各類圖片頭 var localData = localData.replace(/\+/g, "%2B"); // 把+替換成編碼 %2B是加號的編碼 $.ajax({ //通過ajax來將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; //多圖上傳時的多圖片路徑拼合 document.getElementById("picurl").＆#118alue=text1; //上傳成功后返回圖片路徑賦值給picurl }, });