圖片上傳-本地圖片轉base64+ie8支持+本地預覽支持

最近項目因爲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

相關文章
相關標籤/搜索