整体思路:通过Ajax 提交form表单的数据,然后在ajax的回调中触发图片上传。
前端框架用的是layui,直接上图,上代码;
<div class="layui-upload">
<button type="button" class="layui-btn layui-btn-normal" id="testList">选择图片</button>
<div class="layui-upload-list">
<table class="layui-table">
<thead>
<tr>
<th>文件名</th>
<th>大小</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody id="demoList"></tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="layui-btn" id="testListAction" onclick="hint()"
style="margin-left: 40%">立即提交
</button>
<button type="button" class="btn btn-primary" id="testListAction1" style="display:none">
提交图片
</button>
</div>
### 注释也写的差不多了,不懂的小伙伴留言区一起讨论呀。
//提示提交
var BCODE;
function hint() {
$.ajax({
url: "/inputBill/add",
type: 'POST',
data: $("#formid").serialize(),
// 告诉jQuery不要去处理发送的数据
processData: false,
// 告诉jQuery不要去设置Content-Type请求头
contentType: false,
async: true,
success: function (data) {
BCODE = data;
var imgVal = $("#demoList").html();
if (imgVal == '') {
location.href = "/inputBill/index";
layer.msg('提交成功');
} else {
$("#testListAction1").trigger("click"); //触发上传文件
}
}
});
}
//多图片上传
layui.use('upload', function () {
var $ = layui.jquery
, upload = layui.upload;
var demoListView = $('#demoList')
console.log(demoListView)
, uploadListIns = upload.render({
elem: '#testList'
, url: '/inputBill/Uploadattachment'
, acceptMime: 'image/*'
, multiple: true
, auto: false
, bindAction: '#testListAction1'
, before: function (obj) { //obj参数包含的信息,跟 choose回调完全一致。其中输入向后台传输的参数
this.data = {
'BCODE': BCODE
};
}
, choose: function (obj) {
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
obj.preview(function (index, file, result) {
var tr = $(['<tr id="upload-' + index + '">'
, '<td>' + file.name + '</td>'
, '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
, '<td>等待上传</td>'
, '<td>'
, '<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>'
/* ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">预览</button>'*/
, '</td>'
, '</tr>'].join(''));
//单个重传
tr.find('.demo-reload').on('click', function () {
obj.upload(index, file);
});
//删除
tr.find('.demo-delete').on('click', function () {
delete files[index]; //删除对应的文件
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
});
//预览
demoListView.append(tr);
});
}
, done: function (res, index, upload) {
if (res.return_code == 1) { //上传成功
var tr = demoListView.find('tr#upload-' + index)
, tds = tr.children();
tds.eq(1).html('<span style="color: #5FB878;">上传成功</span>');
tds.eq(2).html(''); //清空操作
return delete this.files[index]; //删除文件队列已经上传成功的文件
}
this.error(index, upload);
}
, allDone: function (obj) { //当文件全部被提交后,才触发
layer.msg('保存成功!', {
time: 2000, //2s后自动关闭
btn: ['确定']
});
location.href = "/inputBill/index";
}
, error: function (index, upload) {
var tr = demoListView.find('tr#upload-' + index)
, tds = tr.children();
tds.eq(1).html('<span style="color: #FF5722;">上传失败</span>');
tds.eq(2).find('.demo-reload').removeClass('layui-hide'); //显示重传
}
});
});