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

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

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

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

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

完整客戶端代碼：var localData0 = res.localData; // localData是圖片的base64數(shù)據(jù)，可以用img標簽顯示 var localData =localData0.replace(/^.*?,/,''); // 去掉各類圖片頭 var localData = localData.replace(/\+/g, "%2B"); // 把+替換成編碼 %2B是加號的編碼 $.ajax({ //通過ajax來將base64數(shù)據(jù)發(fā)送給服務器端 url:"topic.php", data:{'localData':localData}, //localData為圖片已經(jīng)轉換好的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 }, });