若依实现多图片文件上传携带表单数据提交（162）
本章主要提供若依如何实现多图片文件上传，并且可以携带表单数据进行提交。
一、效果预览
二、程序代码
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<th:block th:include="include :: header('新增')"/>
<style>
#demo2 {
display: flex;
flex-wrap: wrap;
}
#demo2 .img {
margin: 10px;
display: flex;
flex-direction: column;
}
#demo2 .img img {
width: 100px;
height: 60px;
}
#demo2 .img button {
margin-top: 5px;
}
</style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
<form class="form-horizontal m" id="form-cz-add">
<div class="form-group">
<label class="col-sm-3 control-label">名称：</label>
<div class="col-sm-8">
<input name="name" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">排序：</label>
<div class="col-sm-8">
<input name="score" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">图片上传：</label>
<div class="col-sm-8">
<div class="layui-upload">
<div class="layui-upload-drag" id="test2">
<i class="layui-icon"></i>
<p>点击多图上传，或将文件拖拽到此处</p>
</div>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
预览图：
<div class="layui-upload-list" id="demo2"></div>
</blockquote>
<p id="tipTxt"></p>
</div>
</div>
</div>
</form>
</div>
<th:block th:include="include :: footer"/>
<!-- layUi-->
<link href="//unpkg.com/layui@2.9.7/dist/css/layui.css" rel="stylesheet">
<script src="//unpkg.com/layui@2.9.7/dist/layui.js"></script>
<script>
var files;
layui.use(['element', 'upload'], function () {
var = layui.jquery
, upload = layui.upload
//多图片上传
upload.render({
elem: '#test2'
, multiple: true
, accept: 'images'
, exts: 'jpg|jpeg|png|gjf|webp|bmp|tif'
, drag: true
, auto: false,
bindAction: '#testListAction1'
, allDone: function (obj) {
console.log((obj))
var txt = "共选择了 【" + obj.total + "】 张图片";("#tipTxt").html(txt);
},
choose: function (obj) {
// 将每次选择的文件追加到文件队列
files = obj.pushFile();
//预读本地文件示例，不支持ie8
obj.preview(function (index, file, result) {
console.log((index, file.name))
console.log(files)
('#demo2').append('<div class="img" data-index="' + index + '"><img src="' + result + '" alt="' + file.name + '" class="layui-upload-img"><button type="button" class="layui-btn layui-bg-red layui-btn-x" onclick="delImg(this)">删除</button></div>')
});
}
, before: function (obj) {
this.data = {
'BCODE':("input[name='name']").val()
};
}
});
});
/**
* 删除图片
* @returns {boolean}
*/
function delImg(obj) {
let dataIndex = (obj).parent('.img').attr("data-index");(obj).parent('.img').remove()
for (let index in files) {
if (dataIndex == index) {
delete files[index]
}
}
}
/**
* 上传图片
* @returns {boolean}
*/
function uploadImg() {
if (!files || Object.keys(files).length == 0) {
alert("请选择图片上传");
return false;
}
var formData = new FormData();
for (let i in files) {
formData.append("files", files[i]);
}
formData.append("name", ("input[name='name']").val());
formData.append("score",("input[name='score']").val());
.ajax({
type: 'POST',
url: "/Common/HonorUpload",
data: formData,
processData: false,
contentType: false,
async: false,
dataType: "json",
success: function (result) {
if (result.success == true) {
var arr = result.imageUrl.split(',');
for (let i in files) {
delete files[i]; //文件上传成功，删除列表中对应的文件
var num = i.split('-')[1];('#uploadResult').append('<img id="upload' + i + '" src="' + arr[num] + '" style="width: 90px; height: 90px;">');
}
} else {
alert("图片上传失败");
return false;
}
}
});
}
</script>
<script th:inline="javascript">
var prefix = ctx + "minapp/cz"
("#form-cz-add").validate({
focusCleanup: true
});
function submitHandler() {
if (.validate.form()) {
// .operate.save(prefix + "/add",('#form-cz-add').serialize());
uploadImg()
}
}
</script>
</body>
</html>
主要利用
layui上传组件实现文件预览，在点击确定的时候，再将表单数据和文件一并上传到后台进行处理。