在支持FileReader的浏览器中，可以使用indexOf方法检索文件类型是否为image/开头验证是否是图片。在不支持FileReader的浏览器中使用lastIndexOf与substring方法获取文件后缀判断是否图片。

html5在文件这块新增了FileReader接口，同时对file对象(Blob)进行了升级，可以直接拿到文件的类型和大小，所以若是浏览器版本较高支持FileReader，就可以直接取文件list（h5里file对象为一个list，可以上传多个文件）对象的类型。

图片的类型为image/开头，斜杠后面是图片的后缀，所以可以直接以此来判断上传的文件的类型。在不支持FileReader的浏览器里，file对象没有filename.type和filename.size的api，因此我们需要获得文件的后缀，以此来判断文件类型。

JavaScript中验证是否图片实现代码：

if(typeof FileReader != 'undefined'){
       var file = document.getElementById("imageFile").files[0];         
       if((file.type).indexOf("image/")==-1){       
           console.log("请上传图片!");
       }
 }else{
      var fileName=document.getElementById("imageFile").value;     
      var suffixIndex=fileName.lastIndexOf(".");     
      var suffix=fileName.substring(suffixIndex+1).toUpperCase();     
      if(suffix!="BMP"&&suffix!="JPG"&&suffix!="JPEG"&&suffix!="PNG"&&suffix!="GIF"){
           console.log("请上传图片（格式BMP、JPG、JPEG、PNG、GIF等）!");     
      }      
}

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/7911