基於springboot的ajax異步文件上傳

原文鏈接：https://blog.csdn.net/Yaphst/article/details/82625159

 

input選項

　　input可以不寫在form中，從而也就不需要添加enctype=”multipart/form-data” 和method=”post”,這里我們直接寫一個input.

<input id="cert" type="file" />
<input type="button" value="上傳" οnclick="submit2();" />

ajax提交

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 "上傳成功!";
    }
}