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 = $(['<li id="upload-'+ index +'">'
                                ,'<div><img src="'+result +'"/><input type="hidden" class="layui-input" value="" name="filegoodsimage[]" /><input type="hidden" class="layui-input" name="filegoodsimagesort[]" /></div>'
                                ,'<div>等待上传</div>'
                                ,'<div>'
                                ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                                ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                                ,'</div>'
                                ,'</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文档里面有

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值