在我们开发中，会遇到这样的场景：

1.服务器返回Json数据，根据数据类型来显示是图片还是视频。
2.前端上传文件，需要指定文件类型才能上传到服务器。

这时候就需要使用Js来判断对应文件的类型了，我们常用的判断是通过后缀来实现的。

html结构如下：

<input type="file" id="file" onchange="test()"/>

方案一：

步骤1：通过ID获取文件名的后缀：

function getSuffix(id){
	var dom=document.getElementById(id).value;//根据id得到值
	var index=dom.lastIndexOf(".")//得到最后一个"."在第几位
	return dom.substring(index).toLowerCase(); //截断"."之前的，得到后缀[忽略大写]
}

步骤2：判断文件是图片格式：

function test(){
	var suffix=getSuffix('file');
	if(suffix!=".bmp"&&suffix!=".png"&&suffix!=".gif"&&suffix!=".jpg"&&suffix!=".jpeg"){  //根据后缀，判断是否符合图片格式
        console.log("不是指定图片格式,重新选择"); 
        return false;
   }
}

方案二：

除了上面方法，我们还可以结合正则来判断如下：

function test(){
	var ImgType=["gif", "jpeg", "jpg", "bmp", "png"];//图片
	var dom=document.getElementById('file').value;//根据id得到值
	if(!RegExp("\.(" + ImgType.join("|") + ")$", "i").test(dom.toLowerCase())){
		console.log("不是指定图片格式,重新选择"); 
		return false;
	}
}

链接: https://www.fly63.com/article/detial/325