spring mvc表单多文件混合异步上传

1. 后端示例代码：

@RequestMapping(value="/upload",method=RequestMethod.POST)
public List<File> uploadFile(MultipartHttpServletRequest request) throws IOException{
    //首先定义了一个List<File>用于保存所有文件上传后所在位置，以便后续做出一系列处理。
    List<File> uploadFileList = new ArrayList<File>();
    //拿到name为files的文件上传表单内容（支持多文件）
    List<MultipartFile> files = request.getFiles("files");
    //拿到name为test的表单项
    String test = request.getParameter("test");
    //获取项目真实路径
    String path = request.getSession().getServletContext().getRealPath("");
    //指定temp文件夹
    String tmpPath = path + File.separator + "temp";
    File filePath = new File(tmpPath);
    if(!filePath.exists() || !filePath.isDirectory()){
        filePath.mkdirs();
    }
    //上传等同于输入输出流的正常操作，拿到输入流的bytes往输出流送
    for (MultipartFile multipartFile : files) {
        if(!multipartFile.isEmpty()){
            File tempFile = new File(filePath + File.separator + multipartFile.getOriginalFilename());
            FileOutputStream fos = new FileOutputStream(tempFile);
            BufferedOutputStream bos = new BufferedOutputStream(fos);
            bos.write(multipartFile.getBytes());
            bos.close();
            fos.close();
            uploadFileList.add(tempFile);
        }
    }
    return uploadFileList;
}

注：以上示例可以混合读取表单多文件以及普通字段，并拿到一个文件的真实路径List。

2. 前端示例代码

• 表单同步方式：

  <form action="http://localhost:8080/upload" method="post" enctype="multipart/form-data" id="form">
    <input type="text" name="test" id="test" value="" />
    <input type="file" name="files" id="files" value="" multiple="multiple" />
    <input type="submit" value="上传"/>
  </form>
  

form必须标注enctype属性为multipart/form-data，如需支持多文件，可以设置file控件的multiple属性为multiple（H5支持）。

• ajax异步方式：

  var formData = new FormData(document.getElementById("form"));
  $.ajax({
    url: 'http://localhost:8080/upload',
    type: 'POST',
    data: formData,
    async: true,
    cache: false,
    contentType: false,
    processData: false,
    success: function (returndata) {
        alert("上传成功："+returndata);
    }
  });