• js兼容ie和火狐支持获取图片大小和显示


    <html>
     <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>用户中心</title>
      <base href=""/>
      <meta http-equiv="keywords" content="${keywords}">
      <meta http-equiv="description" content="${description}">
      <script type="text/javascript">
         function perImg(o){
            var filepath = "";//文件路径
            var agent=window.navigator.userAgent;
            var isIE7 = agent.indexOf('MSIE 7.0') != -1;
            var isIE8 = agent.indexOf('MSIE 8.0') != -1;
            if( !o.value.match(/.jpg|.gif|.png|.bmp/i)){
                 alert('图片格式无效!');
                 return;
            }
            if(agent.indexOf("Firefox")!=-1){
            //火狐浏览器判断
               document.getElementById("preview").src = o.files[0].getAsDataURL();//显示预览图
                alert(document.getElementById("preview").src);
                var fileSize=GetFileSize(o); //获取文件大小
                alert(fileSize);
                if(fileSize>1024*1024){
                    alert("文件不能大于1M");
                }else{
                    alert("文件符合大小");
                }
            }else{//IE浏览器
                document.getElementById("preview").src =o.value; //显示预览图片
                 var img=new Image();//动态创建img
                 alert(o.value)
        img.src=o.value;
        img.style.display="none";
        if(img.readyState=="complete"){//已经load完毕,直接打印文件大小
         alert(img.fileSize);//ie获取文件大小
        }else{
         img.onreadystatechange=function(){
         if(img.readyState=='complete'){//当图片load完毕
          alert(img.fileSize);//ie获取文件大小
         }
        }
       }
      }
        }
        //FF判断文件大小函数
        function GetFileSize(fileObj)  
        {  
           var image=new Image();
            var filePath=fileObj.value;
           image.dynsrc=filePath;
           var fileSize=image.fileSize||0;
            if(fileSize==0)
            {
                fileSize=fileObj.files[0].fileSize;
            }
            return fileSize;
        }
        </script>

     </head>
     <body>
      <div>
       <img id="preview" style=" 80px; height: 85px; border: 0px;" />
      </div>
      <br />
      <input type="file" id="file" name="file" onchange="perImg(this)" />
     </body>
    </html>

  • 相关阅读:
    ngx-infinite-scroll angular无限滚动插件
    set<Integer> list<Integer>互转
    Linux Tomcat9 catalina.out日志按日期生成
    mysql创建普通用户并且授权
    抽象类
    全角转半角
    异常工具 获取异常信息 log.setExceptionDetail(ThrowableUtil.getStackTrace(e));
    spring RedisTemplate用法
    canvas实现屏幕截图
    Dynamics CRM
  • 原文地址:https://www.cnblogs.com/ChengDong/p/2215169.html
Copyright © 2020-2023  润新知