Thymeleaf多文件上传、删除、回显

实习遇到个需求，需要多文件上传和删除，还有回显的需求。

html写法：如果有需要回显的文件，则显示，用checkbox来存储需要回显文件的id，方便提交多个，在显示页面将checkbox隐藏即可。每次点击添加附件按钮，都会显示一个【选择文件】按钮。

<form id="editForm" action="/save" method="post" enctype="multipart/form-data">
<div>
<input type="button" id="showAttach" value="添加附件" />

<ol th:if="${fileList != null}" th:each="file : ${fileList}">
<li>
<a href="Javascript:void (0)" th:text="${file.name}">a>
<input type="button" class="ddBtn btnRed removeAttach" value="移除"/>

<input class="commonInput checkbox" type="checkbox" name="uploadedFileList" checked th:value="${file.id}" >
li>
ol>

<ol id="fileList">ol>
div>
form>


js写法，基于jQuery

$(document).ready(function(){
$(".checkbox").hide();
$(document).delegate("#showAttach","click",function add() {
$("#fileList").append("

controller写法,接受回显并编辑后的文件信息用String[] uploadedFileList，也就是隐藏了的checkbox的内容, 即可 对其操作。
这时候uploadedFileList存储的就是之前上传 并且 被保留下来的文件。

/**
*保存
*/
@PostMapping("/save")
@ResponseBody
public ApiResult<Boolean> Save(String[] uploadedFileList
,@RequestParam(value = "attach",required = false) MultipartFile[] myfiles
, PolicyInfoVO policyInfoVO
) {
//do something
return "hello";
}


祝你好运！