表单多图片文件上传解决办法
参考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文档里面有