最近項目因爲flash同窗沒在了,圖片上傳只能前端從新作,後臺但願用base64數據上傳,複用以前接口前端
問題來了,node
1.ie8 不支持canvas轉base64ajax
2.本地預覽 base64數據,ie8僅能顯示32k數據canvas
3.本地圖片如何顯示預覽瀏覽器
4.base64數據如何換算成文件大小dom
//ie轉換方法canvas轉base64 function ieBase64(file){//file是input type="file" 對象dom var realPath, xmlHttp, xml_dom, tmpNode, imgData; realPath = file;//獲取文件的真實本地路徑. xmlHttp = new ActiveXObject("MSXML2.XMLHTTP"); xmlHttp.open("POST",realPath, false); xmlHttp.send(""); xml_dom = new ActiveXObject("MSXML2.DOMDocument"); tmpNode = xml_dom.createElement("tmpNode"); tmpNode.dataType = "bin.base64"; tmpNode.nodeTypedValue = xmlHttp.responseBody; imgData = "data:image/"+ "bmp" +";base64," + tmpNode.text.replace(/\n/g,""); //計算文件大小 var str=imgData.substring(22); var equalIndex= str.indexOf('='); if(str.indexOf('=')>0){ str=str.substring(0, equalIndex); } var strLength=str.length; var fileLength=parseInt(strLength-(strLength/8)*2); if(fileLength > 5120000){//圖片大於5M alert("圖片不能大於5M"); return; } callback(imgData); //return imgData;//渲染圖片 }
本地預覽 base64數據,ie8僅能顯示32k數據url
本地圖片如何顯示預覽 spa
var url; if (navigator.userAgent.indexOf("MSIE")>=1) { // IE >6 imgFile 是input type="file" 對象dom url = imgFile.value; }else{ url = window.URL.createObjectURL(imgFile.files.item(0)); } $("#pic2").attr("src",url);//ie8瀏覽器 base64僅顯示32k數據,這裏用本地地址顯示。。。等ajax執行完成,這裏被替換 });
base64數據如何換算成文件大小code
//計算文件大小 var str=imgData.substring(22); var equalIndex= str.indexOf('='); if(str.indexOf('=')>0){ str=str.substring(0, equalIndex); } var strLength=str.length; var fileLength=parseInt(strLength-(strLength/8)*2); if(fileLength > 5120000){//圖片大於5M alert("圖片不能大於5M"); return; }
代碼下載:https://files.cnblogs.com/files/zhidong123/img-to-base64-ie8.rarxml