js 图片尺寸与格式验证

这是楼主在项目中用到的对图片大小以及格式的验证。

//图片大小验证

if(check(fileId)){

    var  fileObj = document.getElementById(fileId).files[0];   // 获取文件对象

    var reader = new FileReader();  // 新建FileReader对象，

    reader.readAsDataURL(fileObj);   //将文件读取为DataURL，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，                                                                                                                Data URL  是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。
    reader.onload = function(){              //当图片读取为DataURL完成后执行方法

    var img = new Image;          //新建image对象

         img.src = this.result;             // 将上传的图片对象付值给img对象

    img.onload = function(){                  //当图片加载完毕执行如下方法
    if(img.width>750 || img.height!=35){                   //判断图片的高宽
        layer.open({
         title: '提示',
          content: '图片高度应为35像素，宽度不能超过750像素'
        })
     }else{
           // FormData 对象
           var form = new FormData();                 /下面是楼主项目中的逻辑业务，大家不用看
           var creOrUpd=paramId.substring(0,6);
           form.append("file", fileObj);// 文件对象
           $.ajax({
               url : "upload.json",
               type : 'POST',data : form,timeout : 10000,processData : false,contentType : false,
               success : function(data) {
                   if (data.result == 1){
                       $("#"+paramId).html(data.obj);
                       $("#"+creOrUpd+"ChannelForm").find("#channelPic").val(data.obj)
                   }
                   layer.msg("上传成功");
               },
               error : function handleAjaxError(xhr, textStatus, error) {
                   modalfun({width:clientWidth * 0.2,title:"提示",content:"<div class='text-center'>"+message[textStatus]+"</div>",textSure:"确认",cancelHide:true});
               }
           });  
     }
     }
     
     }
    }
}


/**
 * 上传格式验证
 * @param fileId
 */
function check(fileId){
    var file = document.getElementById(fileId).files[0];    //文件对象
    if(file==undefined){//判断是否选择了图片
        modalfun({width:clientWidth * 0.2,title:"提示",content:"<div class='text-center'>请选择一张图片!</div>",textSure:"确认",cancelHide:true});
        return false;
    }
    
    if(!/image\/\w+/.test(file.type)){   //判断类型是不是图片
        modalfun({width:clientWidth * 0.2,title:"提示",content:"<div class='text-center'>请确保文件为图像类型!</div>",textSure:"确认",cancelHide:true});
        return false;
    }
    
    return true;
}