layui上传图片（加大小限制）

最新推荐文章于 2025-06-24 13:40:31 发布

My_Way666

最新推荐文章于 2025-06-24 13:40:31 发布

阅读量1.4w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： layui 文章标签： layui 上传图片

本文链接：https://blog.youkuaiyun.com/My_Way666/article/details/82777728

layui 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用layui实现的图片上传功能，并设置了严格的尺寸限制。上传前会检查图片是否符合指定尺寸，不符合则提示用户。成功上传后，将更新预览图片及后台所需的数据。

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

上传图片加大小限制

 upload.render({
            elem: '#layuiadmin-upload-list'
            , url: '/books/uploadImg'
            , accept: 'images'
            , field: 'file'//后台接收参数名
            ,data: {
            //原路径 带参过去删除
                cover_img_big_old: $("#cover_img_big").val(),
                cover_img_old:$("#avatar").val()
            }
            , acceptMime: 'image/*'
            , auto: false
            , before: function(obj) {
                layer.load();
            }
            ,choose: function(obj){  //上传前选择回调方法
                var flag = true;
                obj.preview(function(index, file, result){
                    console.log(file);            //file表示文件信息，result表示文件src地址
                    var img = new Image();
                    img.src = result;
                    img.onload = function () { //初始化夹在完成后获取上传图片宽高，判断限制上传图片的大小。
                        if(img.width ==600 && img.height ==800){
                            obj.upload(index, file); //满足条件调用上传方法
                        }else{
                            flag = false;
                            layer.msg("您上传的小图大小必须是600*800尺寸！");
                            return false;
                        }
                    }
                    return flag;
                });
            }
            , done: function (res) {
                layer.closeAll('loading');
                $("#cover_img_big").val(res.data.cover_img)
                $("#avatar").val(res.data.cover_img)
                $("#showImg").show()
            }
        });