javascript识别上传的文件是否为图片

javascript识别上传的文件是否为图片

原创  2016年03月10日 13:02:55

• 2596
• 0
• 2

       html5在文件这块新增了FileReader接口，同时对file对象(Blob)进行了升级，可以直接拿到文件的类型和大小，所以若是浏览器版本较高支持FileReader，就可以直接取文件list（h5里file对象为一个list，可以上传多个文件）对象的类型，图片的类型为image/开头，斜杠后面是图片的后缀，所以可以直接以此来判断上传的文件的类型。在不支持FileReader的浏览器里，file对象没有filename.type和filename.size的API，因此我们需要获得文件的后缀，以此来判断文件类型。

[javascript]  view plain  copy

1. if(typeof FileReader != 'undefined'){    
2.    var file = document.getElementById("imageFile").files[0];    
3.      if((file.type).indexOf("image/")==-1){  
4.      swal("提示", "请上传图片!", "warning");  
5.     }  
6. }else{  
7.    var fileName=document.getElementById("imageFile").value;  
8.    var suffixIndex=fileName.lastIndexOf(".");  
9.    var suffix=fileName.substring(suffixIndex+1).toUpperCase();  
10.    if(suffix!="BMP"&&suffix!="JPG"&&suffix!="JPEG"&&suffix!="PNG"&&suffix!="GIF"){  
11.     swal("提示", "请上传图片（格式BMP、JPG、JPEG、PNG、GIF等）!", "error");  
12.    }  
13.     }