基于bootstrap前端框架的Html代码如下：
<div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="myModalLabel3">添加列表</h4> </div> <div class="modal-body"> <div> <form class="form-horizontal" id="myForm"> <div class="form-group"> <input type="hidden" name="cid" value="" id="cid3"> <input type="hidden" name="lid" value="" id="lid1"> <label class="col-sm-3 control-label">列表名：</label> <div class="col-sm-9"> <input type="text" class="form-control" placeholder="列表名" aria-describedby="basic-addon1" id="nameoflist" name="title"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">上传图片：</label> <div class="col-sm-9"> <input id="fileupload" type="file" name="files" multiple> </div> <div class="col-sm-12" id="pictureList"> <table id="uploaded-files" class="table table-striped"> <thead> <tr> <th style="text-align: center">名称</th> <th style="text-align: center">图片</th> <th style="text-align: center">删除</th> </tr> </thead> <tbody id="tbody"> </tbody> <tfoot id="tfoot"> </tfoot> </table> </div> </div> </form> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary" id="button3" data-dismiss="modal" onclick="addList()">保存</button> </div> </div>
点击上传图片按钮选择图片后，通过js代码获取files对象，也就是选择的图片对象，在将这些图片对象复制到新的数组，以便后面进行删除和新增的操作，因为files对象本身是无法修改的，所以只能通过这种方式，曲线救国，表单提交时通过FormData来自定义传递参数
js代码：
// 存储更新所选文件
var curFiles = [];
$("#fileupload").change(function () {
debugger
let files = this.files;
if (files && files.length) {
// 原始FileList对象不可更改，所以将其赋予curFiles提供接下来的修改
Array.prototype.push.apply(curFiles, files);
}
showAllPic(curFiles);
});
//tbody展示图片信息
function showAllPic(arr) {
debugger
$("#tbody").empty();
let piclist = "";
for (let i = 0; i < arr.length; i++) {
piclist += "<tr><td width='20%' class='picName1'style='text-align:center;vertical-align:middle'>"+arr[i].name+"</td>"
+"<td width='70%' style='text-align:center;vertical-align:middle'><img width='100%' height='auto' src="+window.URL.createObjectURL(arr[i])+" /></td>"
+"<td width='10%' style='text-align:center;vertical-align:middle'><a href='javascript:;' onclick='removePic1(this)'>删除</a></td></tr>"
}
$("#tbody").append(piclist);
$("#fileupload").val("");
}
//删除所选图片
function removePic1(obj) {
debugger
let picName = $(obj).parents("tr").find(".picName1").text();
//过滤掉删除的图片
curFiles = curFiles.filter(function(curFiles) {
return curFiles.name !== picName;
});
showAllPic(curFiles);
}
//上传图片
function addList() {
let title = $("#nameoflist").val().trim();
if(title==""){
alert("列表名不能为空！！")
return
}
let nameList = [];
$(".picName").each(function (i,n) {
nameList.push($(n).text());
});
if(curFiles.length==0&&nameList.length==0){
alert("请选择图片！！")
return
}
//通过构造FormData来传递参数
let myForm = new FormData();
for (let i = 0; i < curFiles.length; i++) {
myForm.append("curFiles",curFiles[i])
}
myForm.append('cid', $("#selectCataloger").val());
let lid = $("#lid1").val();
myForm.append('lid', lid);
myForm.append('title',title);
myForm.append('nameList',nameList);
$.ajax({
url: '/upload',
dataType: 'json',
data:myForm,
type: 'post',
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
success: function (data) {
}
});
}
后台SpringMvc接受前端传递的参数：
public class QueryVo {
private String cid;
private String lid;
private String title;
private List<String> nameList;
.....
}
@RequestMapping(value = "/upload", method = RequestMethod.POST)
public int upload(QueryVo queryVo, @RequestParam("curFiles") MultipartFile[] uploadFile) {
//QueryVo接受除图片文件之外的其他普通表单数据， MultipartFile[]用于接收多个图片文件
}