通過(guò)JQ上傳圖片base64數據應該注意的事項

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

當我們使用JQ的AJAX進(jìn)行圖片base64數據上傳時(shí)會(huì )遇到幾個(gè)常見(jiàn)問(wèn)題，下面列出幾條應該注意的事項：

1，應去掉圖片頭如：“data:image/jpeg;base64,”，在轉換圖片base64數據時(shí)會(huì )自動(dòng)在前面加上圖片信息，如“data:image/png;base64,”、“data:image/jpg;base64,”、“data:image/jpeg;base64,”、“data:image/gif;base64,”、“data:image/bmp;base64,”等等，我們應該去掉這些才能保存圖片，在上傳前客戶(hù)端或者上傳后服務(wù)端處理都行。

2，AJAX傳輸時(shí)會(huì )自動(dòng)把內容里的“+”自動(dòng)轉換成空格，在上傳前我們應該將“+”符號進(jìn)行編碼。

完整客戶(hù)端代碼：var localData0 = res.localData; // localData是圖片的base64數據，可以用img標簽顯示 var localData =localData0.replace(/^.*?,/,''); // 去掉各類(lèi)圖片頭 var localData = localData.replace(/\+/g, "%2B"); // 把+替換成編碼 %2B是加號的編碼 $.ajax({ //通過(guò)ajax來(lái)將base64數據發(fā)送給服務(wù)器端 url:"topic.php", data:{'localData':localData}, //localData為圖片已經(jīng)轉換好的base64編碼 type:"post", dataType: "text", async:false,//false表示異步執行,true同步 success:function(res){ var text = document.getElementById("picurl").＆#118alue; //取出picurl之前的值 var text1= text+","+res; //多圖上傳時(shí)的多圖片路徑拼合 document.getElementById("picurl").＆#118alue=text1; //上傳成功后返回圖片路徑賦值給picurl }, });