jquery怎么限制上传图片大小：（亲测可用)

mercenary's L

已于 2022-04-26 10:12:46 修改

阅读量674

点赞数

分类专栏：前端 jQuery 文章标签： javascript

于 2022-04-25 17:43:00 首次发布

本文链接：https://blog.youkuaiyun.com/qq_39947874/article/details/124410482

版权

前端同时被 2 个专栏收录

3 篇文章

订阅专栏

jQuery

1 篇文章

订阅专栏

本文介绍了如何使用jQuery实现在上传过程中限制图片大小的方法，确保上传的图片不超过指定尺寸，有效防止大文件上传。

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

<input type="file" name="file" class="upload"οnchange="Javascript:validate_img(this);">

<script type="text/javascript">
//限制上传文件的类型和大小
function validate_img(ele){
// 返回 KB，保留小数点后两位
//alert((ele.files[0].size/(1024*1024)).toFixed(2));
var file = ele.value;

if(!/.(gif|jpg|jpeg|png|GIF|JPG|bmp)$/.test(file)){

alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
return false;

}else{

//alert((ele.files[0].size).toFixed(2));
//返回Byte(B),保留小数点后两位
if(((ele.files[0].size).toFixed(2))>=(2*1024*1024)){

alert("请上传小于2M的图片");
return false;
}
}
alert("图片通过");
}</script>

方法2：

<input name="refund_pic1" type="file" οnchange="verificationPicFile(this)"/>

<script type="text/javascript">
    function verificationPicFile(file) {
        var fileSize = 0;
        var fileMaxSize = 2048;//1M
        var filePath = file.value;
        if(filePath){
            fileSize =file.files[0].size;
            var size = fileSize / 2048;
            if (size > fileMaxSize) {
                alert("文件大小不能大于2M！");
                file.value = "";
                return false;
            }else if (size <= 0) {
                alert("文件大小不能为0M！");
                file.value = "";
                return false;
            }
        }else{
            return false;
        }
    }   
$(function () {
        $('#post_form1').validate({
            errorPlacement: function (error, element) {
                error.appendTo(element.nextAll('span.error'));
            },
            rules: {
                buyer_message: {
                    required: true
                },
                refund_pic1: {
                    accept: 'image/jpg,image/jpeg,image/gif,image/png',
                },
                refund_pic2: {
                    accept: 'image/jpg,image/jpeg,image/gif,image/png'
                },
                refund_pic3: {
                    accept: 'image/jpg,image/jpeg,image/gif,image/png'
                }
            },
            messages: {
                buyer_message: {
                    required: '<i class="iconfont">&#xe64c;</i>{$Think.lang.please_fill_refund_instructions}'
                },
                refund_pic1: {
                    accept: '<i class="iconfont">&#xe64c;</i>{$Think.lang.image_format}'
                },
                refund_pic2: {
                    accept: '<i class="iconfont">&#xe64c;</i>{$Think.lang.image_format}'
                },
                refund_pic3: {
                    accept: '<i class="iconfont">&#xe64c;</i>{$Think.lang.image_format}'
                }
            }
        });
    });
</script>