效果图
话不多说
<div class="layui-upload layui-upload-gfht" style="padding-bottom:10px;">
<div class="layui-upload-list">
<table class="layui-table">
<thead>
<tr>
<th colspan="3" style="text-align:center">房产证明或购方合同照片</th>
</tr>
<tr>
<th>序号</th>
<th>预览</th>
<th>操作</th>
</tr>
</thead>
<tbody id="demoList"></tbody>
<tfoot>
<tr>
<th colspan="3" id="testList" style="text-align:center">点击选择照片</th>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="layui-upload layui-upload-zlht" style="padding-bottom:10px;">
<div class="layui-upload-list">
<table class="layui-table">
<thead>
<tr>
<th colspan="3" style="text-align:center">房屋租赁合同照片</th>
</tr>
<tr>
<th>序号</th>
<th>预览</th>
<th>操作</th>
</tr>
</thead>
<tbody id="demoList1"></tbody>
<tfoot>
<tr>
<th colspan="3" id="testList1" style="text-align:center">点击选择照片</th>
</tr>
</tfoot>
</table>
</div>
</div>
<button hidden id="testListAction0" data-status="0">购方合同上传</button>
<button hidden id="testListAction1" data-status="1">租赁合同上传</button>
<button type="button" class="layui-btn" id="submit" style="width:100%">提交申请</button>
说明：
1.先设置两个不显示的按钮，分别绑定到两个控件中
2.为每个按钮设置一个状态，如果对应的控件选择了图片就改变状态
3.点击提交申请按钮的时候按业务需求判断有没有选择图片，有就上传图片
$(document).on('click', '#submit_ok', function () {
//按自己的业务来
if ($("#testListAction0").attr('data-status') == 1 && $("#testListAction1").attr('data-status') == 1) {
$("#testListAction0").click();
$("#testListAction1").click();
} else {
layer.msg('请上传合同照片');
return false;
}
timerid=setInterval(submit(),1000);
});
//我这里使用了定时去调用我的提交方法，因为ajax上传图片是异步的，每个控件的所有文件上传完了我都会对初始值加一，这样确定传完了初始值isOk的值就是3，
function submit() {
console.log("即将提交");
if(isOk==3) {
console.log("进行提交");
clearTimeout(timerid);
}
}
网友评论