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

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

小黑雷 2019-04-12 14:47:14  2889  收藏
分类专栏： 前端
版权

前端
专栏收录该内容
33 篇文章0 订阅
订阅专栏
表单多图片文件上传解决办法

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

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

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

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

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

上传成功后设置数组里面的该图片为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文档里面有
————————————————
版权声明：本文为CSDN博主「小黑雷」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u010757785/article/details/89237805