layui图片上传相关问题解决办法

表单多图片文件上传解决办法

参考layui实例 高级应用:制作一个多文件列表

再把上传按钮隐藏,在图片控件里面写

choose:function(obj){obj.preview(function(index,file,result){

记录文件数组,字段设置城false,赋值一段html到页面上,设置重传按钮js的和删除的js

});},done:function(res,index,upload){

上传成功后设置数组里面的该图片为ture

}

在监听表单提交的时候js模拟点击按钮,在用5毫秒轮训查数组值是否都为ture,都为ture在接着走提交表单就ok

后面有时间xiedemo

上传图片宽高限制

 ,choose: function(obj){

                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function(index, file, result){
                    var img = new Image();
                    img.src = result;
                    img.onload = function() {
                        if (img.width >700  || img.height > 700) {
                         layer.msg("图片宽高不能超过700")
                            delete files[index];
                        } else{
                            var li = $(['
  • ' ,'
    ' ,'
    等待上传
    ' ,'
    ' ,'' ,'' ,'
    ' ,'
  • '].join('')); //单个重传 li.find('.demo-reload').on('click', function(){ obj.upload(index, file); }); //删除 li.find('.demo-delete').on('click', function(){ delete files[index]; //删除对应的文件 li.remove(); uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选 }); demoListView.append(li); } }; }); }

    上传图片限制多大和限制上传张数查看layui文档里面有

    你可能感兴趣的:(前端)