• 客户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;
               }
  • 相关阅读:
    使用jsonp跨域调用百度js实现搜索框智能提示(转)
    jsonp 跨域
    Aixs2发布webservice服务
    java web service 上传下载文件
    java 网页 保存上传文件
    flash、js 函数 互相调用
    java web工程启动socket服务
    mysql 在Windows下自动备份
    Servlet中几个常用方法的推衍
    Tomcat常用设置 <持续更新>
  • 原文地址:https://www.cnblogs.com/wdfrog/p/1584372.html
Copyright © 2020-2023  润新知