基于springboot的ajax异步文件上传

当我们在页面填写表格或资料的时候，大多数情况下选择文件并点击上传后我们并不会希望页面跳转，而是希望文件异步上传，我们则继续填写表格中的其他内容，今天遇到了这个问题，结合百度，整理出了一种简单的方法进行文件的异步传输。

• input选项
  input可以不写在form中，从而也就不需要添加enctype=”multipart/form-data” 和method=”post”,这里我们直接写一个input.

<input id="cert" type="file" />
<input type="button" value="上传" onclick="submit2();" />

• ajax提交
  这里用到了formData,因为直接提交表单的话会导致页面的跳转，所以使用formData模拟一个表单提交所需要的数据，将其放入ajax的data里即可。

function submit2(){
    var type = "file";          //后台接收时需要的参数名称，自定义即可
    var id = "cert";            //即input的id，用来寻找值
    var formData = new FormData();
    formData.append(type, $("#"+id)[0].files[0]);    //生成一对表单属性
    $.ajax({
        type: "POST",           //因为是传输文件，所以必须是post
        url: '/upload',         //对应的后台处理类的地址
        data: formData,
        processData: false,
        contentType: false,
        success: function (data) {
            alert(data);
        }
    });
}

• springboot后台接收
  接收文件我们这里使用的是MultipartFile这个类，通过搭配注解写到方法的参数里即可。有一点要注意的是，有些浏览器（如IE）在提交文件后，后台得到的文件名是当时在该浏览器中选择文件时的全路径，这里需要在方法里处理一下，否则保存文件时会报错。
  @RequestParam(“file”)中的参数字符串”file”就是前面在dataForm中定义过的，这里就可以用MultipartFile接收此参数对应的文件。

@Controller
public class UploadController {

    @RequestMapping("/upload")
    @ResponseBody
    public String upload(@RequestParam("file") MultipartFile file) {
        String fileName = file.getOriginalFilename();
        if(fileName.indexOf("\\") != -1){
            fileName = fileName.substring(fileName.lastIndexOf("\\"));
        }
        String filePath = "src/main/resources/static/files/";
        File targetFile = new File(filePath);
        if(!targetFile.exists()){
            targetFile.mkdirs();
        }
        FileOutputStream out = null;
        try {
            out = new FileOutputStream(filePath+fileName);
            out.write(file.getBytes());
            out.flush();
            out.close();
        } catch (Exception e) {
            e.printStackTrace();
            return "上传失败";
        }
        return "上传成功!";
    }
}

综上3步，就完成了文件的异步上传，并且保存在服务器。