在支持 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){
- swal("提示", "请上传图片!", "warning");
- }
- }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"){
- swal("提示", "请上传图片(格式 BMP,JPG,JPEG,PNG,GIF 等)!", "error");
- }
- }
来源: http://www.css88.com/qa/javascript/11274.html