用JS如何实现判断上传文件是否符合格式要求？

案例描述

在浏览器中上传一个文件，判断该文件是否为符合要求的图片（jpg png gif），如果上传的十一张符合要求的图片，浏览器弹出“是一张图片”的警告。若不是，则弹出’请传入一张图片’的警告

基础知识

用到JS中的onchange监听用户上传的文件类型

效果展示

页面加载完毕

上传一张图片

上传的不是一张图片

HTML 代码

要点部分在注释处都已提到

<label >上传图片</label>
    <input type="file" name="" id="file">

JS实现代码

<!--  判断上传的格式  监听作用域的改变-->
<script>
    // 获取标签  //判断上传的是否是图片
    var file = document.getElementById('file');

    //监听作用域的变化   可用于上传文件时到底有没有上传
    file.onchange = function() {
        //获取用户上传的内容  图片路径
        var path = this.value;

        //截取
        var fix = path.substr(path.lastIndexOf('.'));
       // console.log(fix);

        //统一转成小写  
        var lowFix = fix.toLowerCase();

        //判断
        if(lowFix === '.jpg' || lowFix === '.png' ||lowFix === '.gif')
            alert('是一张图片');
        else
            alert('请传入一张图片');
        
    }
</script>