JS验证图片格式和大小并预览的简单实例

function photoCheck(obj){    var ff = $("#photoSrc").val();    if(ff == null || ff == ""){      return;    }    photo_flag = true;    var fSize = 50.9 * 1024;    var fileType;    var fileSize;    var filePath;    if (obj.files) { // webkit, mozilla... (jq:$.support.boxModel)  // ff & chrome      var reader = new FileReader();      var thisFile = obj.files[0];      var isFirefox=navigator.userAgent.indexOf("Firefox");  //ff 下获取图片大小      fileType = thisFile.type;      fileSize = isFirefox > 0 ? thisFile.size : thisFile.fileSize;       reader.readAsDataURL(thisFile);            reader.onloadend = function(event) {        var imgObj = new Image();        imgObj.src = event.target.result; // image src        imgObj.onload = function(event) {          filePath = this.src;          if(photo_flag){            $("#imgShow").attr("src", filePath);          } else {            $("#imgShow").attr("src", "<%=request.getContextPath()%>/userTx/default.jpg");          }        }      }     } else {  /////////////////////////////////////////////  ie      obj.select();      var path = document.selection.createRange().text;      var img = new Image();       img.src = path;             var fileType = path.substring(path.length-4,path.length);       if(img.readyState == "complete") {        fileSize = img.fileSize;      } else {        img.onreadystatechange=function(){           if(img.readyState=='complete'){//当图片load完毕             fileSize = img.fileSize;             if(fileSize > fSize){               setMsg('photoSrc_msg', '图片太大了！', 'reg_wrong');              photo_flag = false;              $("#imgShow").attr("src", "<%=request.getContextPath()%>/userTx/default.jpg");              return;            }          }         }      }      if (path) {        filePath = path;      }    }        if(fileType != ".jpg" && fileType != ".JPG" && fileType != "image/jpeg"){//image/jpeg      setMsg('photoSrc_msg', '图片格式错误！', 'reg_wrong');      photo_flag = false;      $("#imgShow").attr("src", "<%=request.getContextPath()%>/userTx/default.jpg");      return;    }    if(fileSize > fSize){      setMsg('photoSrc_msg', '图片太大了！', 'reg_wrong');      photo_flag = false;      $("#imgShow").attr("src", "<%=request.getContextPath()%>/userTx/default.jpg");      return;    }    setMsg('photoSrc_msg', '正确', 'reg_ok');    if(photo_flag){      $("#imgShow").attr("src", filePath);    } else {      $("#imgShow").attr("src", "<%=request.getContextPath()%>/userTx/default.jpg");    }  }

<script type="text/javascript">function photoCheck(obj){　　　var ff = $("#photoSrc").val();　　　//获取文件的路径  if(ff == null || ff == ""){    return;  }  photo_flag = true;  var fSize = 50.9 * 1024;//设置图像的大小为50kb，这里你可以自己设置  var fileType;  var fileSize;  var filePath;　　　if (obj.files) { 　　　// obj.files 是chrome，firefox等浏览器的对戏那个，如果是ie的话他的值就是false    var reader = new FileReader();//这个FileReader在稍后会进行较详细的描述，要注意的是只有 Firefox 3.6+ 和 Chrome 6.0+ 实现了 FileReader 接口。    var thisFile = obj.files[0];//获取文件的对像    var isFirefox=navigator.userAgent.indexOf("Firefox"); 　　//注意这个是判断当前用户使用的浏览器是哪一种，如果返回的值是大于0的话,那么表示浏览器是当前浏览器，例如isFirefox>0上诉的就是firefox      fileType = thisFile.type;//获取文件的类型，一般来说，如果类型是image/jpeg,.jpg,.gif等等图片格式的话就是合理的    fileSize=thisFile.size;//获取当前上传的文件的大小    fileSize = isFirefox > 0 ? thisFile.size : thisFile.fileSize; //如果是firefox,调用    reader.readAsDataURL(thisFile);    // readAsDataURL：该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URI，Data URI是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件    reader.onloadend = function(event) {　　//文件读取成功完成时触发            var imgObj = new Image();      imgObj.src = event.target.result; // 图像的路径      　　 imgObj.onload = function(event) {   // 图片加载完毕后        filePath = this.src;                if(photo_flag){          $("#imgShow").attr("src", filePath);//设置图片为当前上传的图片路径        } else {          $("#imgShow").attr("src", "default.jpg");//否则设置默认的图片        }      }    } 　　　} else { //如果是ie　　　   obj.select();    var path = document.selection.createRange().text;//ie下返回上传时选定的文件路径    var img = new Image();     img.src = path;         var fileType = path.substring(path.length-4,path.length);     if(img.readyState == "complete") {//图片加载完毕,获取图片的大小      fileSize = img.fileSize;    } else {      img.onreadystatechange=function(){         if(img.readyState=='complete'){//当图片load完毕           fileSize = img.fileSize;           if(fileSize > fSize){               photo_flag = false;            $("#imgShow").attr("src", "default.jpg");            return;          }        }       }    }    if (path) {      filePath = path;    }  }  //图片格式的判断　　　if(fileType != ".jpg" && fileType != ".JPG" && fileType != "image/jpeg"){ 　　　    photo_flag = false;    $("#imgShow").attr("src", "default.jpg");    return;  }  if(fileSize > fSize){    alert("图片太大了！");    photo_flag = false;    $("#imgShow").attr("src", "default.jpg");    return;  }  if(photo_flag){    $("#imgShow").attr("src", filePath);  } else {    $("#imgShow").attr("src", "default.jpg");  }}</script></head><body><input type="file" name="usertx" id="photoSrc" value="文件上传" onchange="photoCheck(this)"/><div>//显示图片的div<img src="" id="imgShow" style="width:100px;height:100px"></img></div></body></html>