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 "#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 "#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="/UploadFiles/2021-04-02/">

如果是在chrome下上传的头像的话，我们查看的起src路径会发现
发现该方法将文件读取为一段以 data: 开头的字符串，像上面描述的一样，正是FileReader中readAsDataURL的作用，下面介绍下FileReader
方法名参数描述
abort
none
中断读取

readAsBinaryString
file
将文件读取为二进制码
readAsDataURL
file
将文件读取为 DataURL
readAsText
file, [encoding]
将文件读取为文本
readAsText： 该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。readAsBinaryString： 它将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。readAsDataURL： 这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URI，Data URI是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件
FileReader还有以下的事件
事件描述
onabort

中断时触发
onerror

出错时触发
onload

文件读取成功完成时触发
onloadend

读取完成触发，无论成功或失败
onloadstart

读取开始时触发
onprogress

读取中
文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null ，否则即是读取的结果，绝大多数的程序都会在成功读取文件的时候，抓取这个值。
以上就是小编为大家带来的JS验证图片格式和大小并预览的简单实例全部内容了，希望大家多多支持~