HTML中上传文件

在Web项目中有许多需求，项目过后对大批零散的碎片记录笔记。

此篇笔记内容为：在Html中上传文件，后台获取来操作的需求。

1、表单提交

1. 前端：

• from标签上一定要添加enctype=“multipart/form-data”

• <input>标签中设置type=“file”，若要多文件上传则添加属性multiple=“multiple”

• <form th:action="@{/file/upload}" method="post" enctype="multipart/form-data">
      <table>
          <tr>
              <td><input type="file" name="file" multiple="multiple" /></td>
          </tr>
          <tr>
              <td><input type="submit" value="提交"/></td>
          </tr>
           <hr>
       </table>
   </form>
  

2. 后端：

• 使用MultipartFile或者MultipartFile[]接收即可

• 调用transferTo(File file)即可保存

  @PostMapping("/updateFile")
  @ResponseBody
  public String updateFile(@RequestParam("name")String name,
                           @RequestParam("files") MultipartFile[] files){
  
      for (MultipartFile multipartFile : multipartFiles) {
          try {
              multipartFile.transferTo(file);
          } catch (IOException e) {
              e.printStackTrace();
          }
      }
      return "0";
  }
  

2、JavaScript中异步提交：

1. 前端：

• 通过文件框的"files"属性获得

• js中定义了FormData对象，方便传输，有key-value的结构。同时也能通过传入form的element对象直接将表单数据初始化到formData实例对象中。

• var files = $(this).prop("files");
  if (files.length <= 0) {
      return;
  }
  var formData = new FormData();
  //将file封装到Array
  for(var i = 0;i < files.length;i++){
      //不能给FormData对象中直接传入一个数组，通过多次append的key相同时则可达到传数组的效果
      formData.append("files",files[i]);
  }
  formData.append("name",name);
  $.ajax({
      type:"post",
      url:"updateFile",
      data:formData,
      dataType:"json"
      processData:false,//数据不做处理
      contentType:false,//不要设置content-Type请求头
      cache:false,//上传文件无需缓存
      success:function (data) {
  
      }
  
  })
  

2. 后端：

• 如果ajax中数据传的是FormData对象，则后端获取时通过key值即可获取到value

• @PostMapping("/updateFile")
  @ResponseBody
  public String updateFile(@RequestParam("name")String name,
                           @RequestParam("files") MultipartFile[] files){
      //保存当前图片，修改数据库中对应字段数据
      applicationService.saveFiles(files,name,enterprise.getId());
      return "0";
  }