最近项目因为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