前端如何限制图片的大小和格式

最新推荐文章于 2024-09-30 14:34:33 发布

原创最新推荐文章于 2024-09-30 14:34:33 发布 · 8.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

个人日记专栏收录该内容

108 篇文章

订阅专栏

本文介绍了一个简单的HTML文件上传功能及对应的JavaScript验证逻辑，确保上传的文件为常见的图片格式且大小不超过2MB。通过实时反馈提示用户文件是否符合要求。

HTML代码

 <div class="pic_file">
      选择上传的图片: 
      <input type="file" name="img" multiple="multiple" onchange="uploadfile(this)"/>
       <!--<input class="pic_file_sub" type="submit" />-->
      <span id="UPtip" style="color:red;font-size:1.5rem"></span>
</div>


<div class="business_footer">
        <input class="btn btn-info sure" type="submit" value="提交"/>
</div>

JS代码

    function uploadfile(_this){
        var ss='';
        var uptip=false;
        for(var i=0;i<_this.files.length;i++){
            var xn=_this.files[i].name;
            var xs=_this.files[i].size;
            var xtype=xn.substr(xn.length-3);
            var xtype2=xn.substr(xn.length-4);
            if((xtype!="jpg" && xtype!="png" && xtype2!="jpeg") || xs>2097152){
                uptip=true;
            }
            ss+=xn+" : "+xs+"byte"+"<br/>";
        }
        if(uptip){
            $("#UPtip").html("请检查大小和格式").show();
        }else{
            $("#UPtip").hide();
        }
        $(".pic_file_show").html(ss);

    }