zoukankan      html  css  js  c++  java
  • 客户javascript端验证图片文件大小与规格使用Image对象

    在IE6.0下测试
      一般Image对象用来预加载图片,不过加载后却可以获取图片的width,height,以及fileSize(单位字节)
     不过直接使用 var img=new Image()
                      img.src="adfadsf.jpg";
                      alert(img.fileSize);
    有时弹出值是零,原因是图片比较大时没加载完成故fileSize是零,解决办法是在img.onLoad事件里进行测试,这样就可以"安全"的获取到图片文件的大小与规格,
    以下是基于JQuery写相关代码:
    ===========================
    function fileChangeHandle(){
         var src=this.value;
         var img=new Image();
        
         var reg=/^.*?\.(jpg|jpeg|gif)$/i;
         if(!reg.test(src)){
           alert("只允许上传jpg|jpeg|gif格式的文件!");
           clearUpload();
           return false;
         }
         //对应onload事件
         $(img).one("load",function(){
            if(img.fileSize > 100*1024){
              alert("最大图片只允许100KB!");
              clearUpload();
              return false;
            };
            if(img.width <200 || img.width>500 || img.height<200 || img.height>500){
              alert("图片最小规格200*200,最大规格500*500");
              clearUpload();
              return false;
            }
            $("#imageA").attr("src",src);
         });
        //无法加载的文件会触发error事件,而上面的load不会被触发
         $(img).one("error",function(){
           alert("图片格式错误!");
           clearUpload();
           return false;
         });
         //附值src属性
         img.src=src;
        
       }

    下面一段是朋友提供的,直接使用Js编写
    //////////////////////////////////////
    var oImg=new Image();
             var imgsize;
             var iFlag;
             iFlag=false;
             oImg.src=document.getElementById("File1").value;
            oImg.onload=function()
             {
                   if(!iFlag)
                   {
                    iFlag=true;
                    imgsize=(oImg.fileSize/1024).toFixed(0);
                   }
            }
            oImg.src=document.getElementById("File1").value;
              if(imgsize>500)
              {
                    document.getElementById("File1").focus();
                    alert("商品图片1已经超过500K")
                    return false;
               }
  • 相关阅读:
    制作类似QQ截图软件
    XML文件与实体类的互相转换
    MFC中真彩工具条的制作方法
    MFC使用技巧集锦(1)(转载)
    抽象工厂模式与工厂方法模式区别
    VC数据库编程分析
    如何让工具条显示256色图像
    华为软件编程规范和范例
    设计模式总结性试题
    VC++中基于ADO操作ACCESS数据库,FLEXGRID控件的综合应用
  • 原文地址:https://www.cnblogs.com/wdfrog/p/1584372.html
Copyright © 2011-2022 走看看