zoukankan      html  css  js  c++  java
  • 图片上传-本地图片转base64+ie8支持+本地预览支持

    最近项目由于flash同学没在了,图片上传只能前端重新做,后台希望用base64数据上传,复用之前接口

    问题来了,

    1.ie8 不支持canvas转base64

    2.本地预览 base64数据,ie8仅能显示32k数据

    3.本地图片如何显示预览

    4.base64数据如何换算成文件大小

     
    //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(/
    /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数据

    本地图片如何显示预览 

    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数据如何换算成文件大小

    //计算文件大小
                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.rar

  • 相关阅读:
    .NET面试题系列(五)数据结构(Array、List、Queue、Stack)及线程安全问题
    一个使用 Go 的思维来帮助您构建并开发 Go 应用程序的开源框架
    UML类图学习
    服务器防攻击手段
    .NET面试题系列(四)计算机硬件知识
    .NET面试题系列(三)排序算法
    ASP.NET MVC学习(五)之MVC原理解析
    socketWriter.go
    multiWriter.go
    timeCache.go
  • 原文地址:https://www.cnblogs.com/zhidong123/p/9413877.html
Copyright © 2011-2022 走看看