layui 上传图片校验

最新推荐文章于 2023-11-17 17:18:27 发布

原创最新推荐文章于 2023-11-17 17:18:27 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

后台模块专栏收录该内容

12 篇文章

订阅专栏

    layui地址[添加链接描述](https://www.layui.com/doc/modules/upload.html)![在这里插入图片描述](https://img-blog.csdnimg.cn/2020101911421089.png#pic_center)

在这里插入图片描述

    var uploadInst = upload.render({
        elem: '#test2'
        ,accept: 'images'
        ,multiple:false
        ,auto: false
        , url: '{:url("upload/uploadImg")}' //改成您自己的上传接口
        ,auto: false //
        ,choose: function(obj){  //上传前选择回调方法
            var flag = true;
            // https://www.layui.com/doc/modules/upload.html
            obj.preview(function(index, file, result){
                // console.log(file);            //file表示文件信息，result表示文件src地址
                var img = new Image();
                img.src = result;
                img.onload = function () { //初始化夹在完成后获取上传图片宽高，判断限制上传图片的大小。
                    console.log(img.width+'宽度');
                    console.log(img.height+'高度');
                    if(img.width <= 1000){
                        $('#demo2').attr('src', result);
                        obj.upload(index, file); //满足条件调用上传方法
                    }else{
                        flag = false;
                        // layer.msg("您上传的图片最短边至少50px，最长边最大4096px！");
                        layer.alert("上传海报图片宽度不可大于1000px", { icon: 5, title: "提示", offset: "auto", skin: 'layui-layer-molv' });
                        return false;
                    }
                }
                return flag;
            });
        }
        , done: function (res) {
            //如果上传失败
            if (res.code > 0) {
                return layer.msg('上传失败');
            }
            //上传成功
            $('input[name="thumb"]').val(res.data)
        }
        , error: function () {
            //演示失败状态，并实现重传
            var demoText = $('#demoText2');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
            demoText.find('.demo-reload1').on('click', function () {
                uploadInst.upload();
            });
        }
    });