Layui上传多图片并限制图片分辨率示例代码

话不多说，如标题  直接上代码

HTML代码

    

        冒泡推送首页大海报:
        

            选择多文件
            开始上传
            文件最大:2M;请记得点击开始上传
            

                

                    

                    

                        
文件名
                        
大小
                        
状态
                        
预览
                        
操作
                    
                    
                    

                
            
        

    

JS代码

        var posterWidth = 1280, posterHeight = 720;
        var flag = true;
        //大海报多文件列表示例
        var demoListView2 = $('#demoList2')
            , uploadListIns = upload.render({
            elem: '#testList2'
            , url: '/workbench/plan/upload2'
            , accept: 'file'
            , multiple: true
            , auto: false
            , size: 2048
            , bindAction: '#testListAction2'
            , choose: function (obj) {
                 flag = true;
                if ($('#status_id').val() == '30') {
                    top.layer.alert("当前活动为返单,不允许更改")
                    return;
                }
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function (index, file, result) {

                    var img = new Image();
                    img.onload = function () {
                        console.log('choose poster', img.width, img.height);
                        if (posterWidth == img.width && posterHeight == img.height) {
                            $('#upload_poster_preview').attr('src', result); //图片链接（base64）不支持ie8
                            // obj.upload(index, file);
                        } else {
                            layer.msg('海报尺寸必须为：' + posterWidth + 'px  ' + 'x' + posterHeight + 'px,请删除再次上传');
                            flag = false;
                        }
                    };
                    if (!flag) {
                        return false;
                    }

                    img.src = result;

                    var tr = $([''
                        , '' + file.name + ''
                        , '' + (file.size / 1014).toFixed(1) + 'kb'
                        , '等待上传'
                        , ''
                        , ''
                        , '重传'
                        , '删除'
                        , ''
                        , ''].join(''));

                    //单个重传
                    tr.find('.demo-reload').on('click', function () {
                        obj.upload(index, file);
                    });

                    //删除
                    tr.find('.demo-delete').on('click', function () {
                        delete files[index]; //删除对应的文件
                        tr.remove();
                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                    });

                    demoListView2.append(tr);
                });
            },before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。

                if (!flag) {
                    layer.msg('海报尺寸必须为：' + posterWidth + 'px  ' + 'x' + posterHeight + 'px,请删除再次上传');
                    this.error(index, upload);
                    return false;
                }
            }
            , done: function (res, index, upload) {

                if (res.code == 0) { //上传成功

                    var inputVal = document.getElementById("imgInput2").value;
                    var valData = "";
                    if (inputVal) {
                        valData = inputVal + "," + res.dataname;
                    } else {
                        valData = res.dataname;
                    }
                    document.getElementById("imgInput2").value = valData;
                    console.log(valData);

                    var tr = demoListView2.find('tr#upload-' + index)
                        , tds = tr.children();
                    tds.eq(2).html('上传成功');
                    tds.eq(3).html(''); //清空操作
                    return delete this.files[index]; //删除文件队列已经上传成功的文件
                }
                this.error(index, upload);
            }
            , error: function (index, upload) {
                var tr = demoListView2.find('tr#upload-' + index)
                    , tds = tr.children();
                tds.eq(2).html('上传失败');
                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });

具体更多操作请见layui的官网

 

点赞或者评论是我最大的动力,有问题欢迎留言或者联系q:1559810637