用JS如何实现判断上传文件是否符合格式要求？_j q上传判断多个文件格式-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45473786/article/details/104855276

本文介绍了一个简单的前端案例，通过JavaScript监听用户上传的文件类型，并判断其是否为图片（jpg/png/gif）。若上传的是图片，浏览器将显示确认信息；如果不是图片，则提示用户重新上传。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

案例描述

在浏览器中上传一个文件，判断该文件是否为符合要求的图片（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>