javascript\jquery 多文件上传，动态添加元素，动态删除父节点元素

浅绿色为原生JavaScript代码

浅黄色为jQuery代码

html

 1 <!DOCTYPE html>
 2 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 6     <title>动态添加文件上传列表</title>
 7     <link th:href="@{/css/bootstrap.min.css}"rel="stylesheet">
 8     <script th:src="@{/js/jquery-3.5.1.min.js}"></script>
 9 </head>
10 <body>
11     <div th:if="${uploadStatus}" style="color:red;" th:text="${uploadStatus}">上传成功</div>
12     <form th:action="@{/mutiUploadFile}" method="post" enctype="multipart/form-data">
13         <div class="form-group">
14             <label>动态添加文件上传</label>
15             <input type="button" value="添加文件" onclick="add()"/>
16             <div id="file" class="" th:value="文件上传区域"></div>
17         </div>
18         <input id="submit" type="submit" value="上传" style="display: none;margin-top:10px;">
19     </form>
20 <script>
21     //动态添加上传按钮
22     function add() {
23         var innerdir="<div>"+
24             "<input type='file' style='''margin:5px;'name='files'required='required'>"+
25             "<input type='button' value='删除' onclick='remove(this)'>"+
26             "</div>"
27         // var oldHttp=document.getElementById("file").innerHTML;
28         // document.getElementById("file").innerHTML=oldHttp+innerdir;
29         // document.getElementById("submit").style.display="block";
30        $("#file").append(innerdir);
31         $("#submit").css("display","block");
32     }
33     function remove(obj) {
34         // obj.parentElement.remove();
35         // if(document.getElementById("file").childElementCount==0){
36         //     document.getElementById("submit").style.display="none";
37         // }
38         $(obj).parent().remove();
39         if($("#file div").length==0){
40             $("#submit").css("display","none");
41         }
42     }
43 </script>
44 </body>
45 </html>

后端控制器代码：

 1  @PostMapping("/mutiUploadFile")
 2     public String mutiUploadFiles(MultipartFile[] files,Model model){
 3         for(MultipartFile file:files){
 4             String fileName=file.getOriginalFilename();
 5             fileName=UUID.randomUUID()+"_"+fileName;
 6             String dirPath="F:/file/";
 7             File filePath=new File(dirPath);
 8             if(!filePath.exists()){
 9                 filePath.mkdirs();
10             }
11             try{
12                 file.transferTo(new File(dirPath+fileName));
13                 model.addAttribute("uploadStatus","上传成功");
14             } catch (IOException e) {
15                 e.printStackTrace();
16                 model.addAttribute("uploadStatus","上传失败");
17             }
18         }
19         return "mutiUpload";
20     }

 

posted @ 2020-05-09 15:23  codeing123  阅读(508)  评论(0)    收藏  举报