（H5）FormData+AJAX+SpringMVC跨域異步上傳文件

時間 2019-11-13

標籤 h5 formdata+ajax+springmvc formdata ajax springmvc 異步上傳文件欄目 Ajax 简体版

原文原文鏈接

最近都沒時間整理資料了，一入職就要弄懂業務，成天被業務弄得血崩。javascript

總結下今天弄了一個早上的跨域異步上傳文件。主要用到技術有HTML5的FormData，AJAX，Spring MVC。html

首先看下上傳頁面：前端

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="js/plugins/jquery-1.8.3.min.js" ></script>
        <title></title>
    </head>
    <body>
        <input type="file" id="file_upload"/>
        <input type="button" value="上傳圖片" id="upload"/>            
    </body>
    <script type="text/javascript" src="js/upload.js" ></script>
</html>

上傳頁面很簡單，就兩個input元素。java

而後看下upload.js。注意這個upload.js是本身寫的，裏面那個ajaxFileUpload並非jQuery提供的那個上傳插件的方法。jquery

$(document).ready(function(){
    
    function ajaxFileUpload(){
        var formData = new FormData();
        formData.append('file',$("#file_upload")[0].files[0]);    //將文件轉成二進制形式
        $.ajax({
            type:"post",
            url:"http://localhost:8080/nitshareserver/serve/fileupload",
            async:false,
            contentType: false,    //這個必定要寫
            processData: false, //這個也必定要寫，否則會報錯
            data:formData,
            dataType:'text',    //返回類型，有json，text，HTML。這裏並無jsonp格式，因此別妄想能用jsonp作跨域了。
            success:function(data){
                alert(data);
            },
            error:function(XMLHttpRequest, textStatus, errorThrown, data){
                alert(errorThrown);
            }            
        });
    }
    
    $("#upload").click(function(){
        ajaxFileUpload();
    });
});

前端這樣就能夠了，接下來看看服務端的寫法。ajax

服務端接口寫法：json

//    @ResponseBody
    @RequestMapping(value="fileupload", method=RequestMethod.POST,produces="text/html;charset=utf-8")
    public void addPic(HttpServletResponse response,HttpServletRequest request,
            @RequestParam(value="file", required=false) MultipartFile file) throws IOException{
        System.out.println(file.getOriginalFilename());
        response.getWriter().write("success");
        response.setHeader("Access-Control-Allow-Origin", "*");
//        return "success";
    }

這裏response.setHeader("Access-Control-Allow-Origin", "*");這句很重要，沒有這句，前端接收不到返回的數據。Access-Control-Allow-Origin是HTML5中定義的一種服務器端返回Response header，用來解決資源（好比字體）的跨域權限問題。它定義了該資源容許被哪一個域引用，或者被全部域引用（google字體使用*表示字體資源容許被全部域引用），可是在真正的產品中，是不會用*的。這裏只是好方便演示。跨域

那跑一下工程，看看前端會不會收到success吧。服務器

結果：app