利用AJAX上传文件,并实现对input file保存修改上传列表的功能

新手做了一个个人网盘,文件的上传列表一直找不到合适的解决方案
用传统form表单提交,只能一次性的,虽然能实现对上传文件信息的预览,但是每次添加都会清空列表,而且无法修改上传列表.查了各种资料,都说input file里的信息是只读的,不能修改,最后决定用FormData来实现,可以直接对上传列表进行列表,修改.
把过程写出来,希望能给大家思路.直接上代码

html

<th >
     <input type="file" id="getFile" multiple style="display: none" hidden>
     <input class="btn btn-primary" type="button" value="添加文件" onclick="getFile()">
     <input class="btn btn-success" type="button" onclick="upload(fd)" value="确认上传">
</th>
     <tbody id="fileInfo">
<%--  这里动态添加文件信息--%>
      </tbody>

js

 <script>     
	 	function getFile(){
	       	document.getElementById("getFile").click();
        }
		            
          var fd = new FormData();
          //获取文件框ID
          var input = document.getElementById('getFile');
          //获取tbody ID
          var fileInfo = document.getElementById('fileInfo');
          //创建监听器,当文件框确认时执行函数
          input.addEventListener('change', updateDisplay);
          
          //发送FormData
          function upload(fd) {
              var xhr = new XMLHttpRequest();
              xhr.open("post", "${pageContext.request.contextPath}/file/upload", true);
              xhr.send(fd);
          }
        
          var f=1;
          function updateDisplay() {
              //从input file中获取文件
              var curFiles = input.files;
              for(var i = 0; i < curFiles.length; i++,f++) {
                 //创建tr
                  var tr = document.createElement('tr');
                  //设置tr的id和file文件的id,用于删除
                  var trId="tr"+f;
                  var fileId="file"+f;
                  tr.setAttribute("id",trId);
                  //添加到FormData中
                  fd.append(fileId, curFiles[i]);
                  //设置图片预览td
                  var imageTd=document.createElement("td");
                  //设置图片框img,包含在图片td里
                  var image = document.createElement('img');
                  //设置文件名td
                  var name = document.createElement('td');
                  //设置文件大小td
                  var size = document.createElement('td');
                  //设置上传进度td,暂未实现
                  // var progress=document.createElement("td");
                  //设置按钮td
                  var button=document.createElement("td");
                  //设置input按钮
                  var del=document.createElement("input");
                  //设置按钮属性
                      del.setAttribute("class","btn btn-primary");
                      del.setAttribute("type","button");
                      del.setAttribute("onclick","deleteFd('"+fileId+"','"+trId+"')");
                      del.setAttribute("value","删除");
                  //填充图片框
                  image.src = window.URL.createObjectURL(curFiles[i]);
                  //将图片框加入到td中
                  imageTd.appendChild(image);
                  //填充文件名td
                  name.textContent = curFiles[i].name ;
                  //填充文件大小td
                  size.textContent =  returnFileSize(curFiles[i].size);
                  //将按钮加入到按钮框td中
                  button.appendChild(del)
                  //将所有td加入到tr中
                      tr.appendChild(imageTd);
                      tr.appendChild(name);
                      tr.appendChild(size);
                      // tr.appendChild(progress);
                      tr.appendChild(button);
                  //将tr加入到tbody中
                  fileInfo.appendChild(tr);
                  }
          }
          // 格式化文件大小
          function returnFileSize(number) {
              if(number < 1024) {
                  return number + 'bytes';
              } else if(number > 1024 && number <1048576) {
                  return (number/1024).toFixed(2) + 'KB';
              } else if(number > 1048576&&number<1073741824) {
                  return (number/1048576).toFixed(2) + 'MB';
              }else if(number > 1073741824) {
                  return (number/1073741824).toFixed(2) + 'GB';
              }
          }
          // 操作删除上传列表
          function deleteFd(fileId,trId) {
              fd.delete(fileId);
              document.getElementById(trId).remove();
          }
</script>

java后台

 public String upLoad(HttpServletRequest request) throws IOException {
	 MultipartHttpServletRequest ms= (MultipartHttpServletRequest) request;
	 Map<String, MultipartFile> fileMap = ms.getFileMap();
	 Collection<MultipartFile> values = fileMap.values();
     	//遍历获取文件信息
  	  for (MultipartFile value : values) {
          System.out.println(value.getOriginalFilename());
          System.out.println(value.getSize());
          ...........
	     //各种获取真实地址判断什么的代码都不写了
	      ...........
	      //最后实现上传
	      value.transferTo(new File(path,filename));
       }
       return ....;

原理:每次添加文件,就把文件信息添加进FormData中记录序号,动态添加表格,并记录表格id
有了文件序号和表格id,就可以各种操作了,主要就是下面这块代码进行操作

   // 操作删除上传列表
          function deleteFd(fileId,trId) {
              fd.delete(fileId);
              document.getElementById(trId).remove();
          }