SpringMVC Ajax上傳文件實例

做了一個文件上傳模塊，因爲傳統的form提交會有頁面刷新，不符合我的使用要求，所以我採用Ajax提交方式，這裏說明下，我的應用程序前端爲Ajax提交，後端SpringMVC接收處理。

傳統form提交文件方式：

<form id="uploadPic" action="/user/saveHeaderPic" method="post" enctype="multipart/form-data">
    <input type="file" name="file"/>
    <input type="submit" value="提交"/>
</form>

採用Ajax提交文件，我先後出現瞭如下兩個問題：

1. Ajax post 400 (Bad Request)

2. HTTP Status 400 - Required CommonsMultipartFile parameter ‘pic’ is not present

這裏先解釋下錯誤原因：

問題1：

Ajax參數錯誤導致，上傳文件的form我使用了jquery.form.js的form序列化，這樣傳輸表單到後臺很方便，但是二進制文件是無法用form.serialize()序列化的。

所以最終我採用了FormData的傳輸方式，XMLHttpRequest Level 2添加了一個新的接口FormData。利用FormData對象，我們可以通過JavaScript用一些鍵值對來模擬一系列表單控件，我們還可以使用XMLHttpRequest的send()方法來異步的提交這個“表單”。比起普通的ajax，使用FormData的最大優點就是我們可以異步上傳一個二進制文件。

但使用formData對瀏覽器有一定要求（Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+），如果程序需要兼容低版本瀏覽器，可去查看其他JS上傳控件或flash上傳控件。

formData使用參看：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/FormData

問題2:

這個問題是因爲不細心導致的 - -，後端接收的參數名和前端file控件name名稱不一致導致。

好啦，下面給出我的前後端代碼示例：

HTML:

<form id="uploadPic" action="#" enctype="multipart/form-data">
    <input type="file" name="file">
    <a href="javascript:savePic();" class="btn green"> 提交 </a>
</form>

JS腳本：

<script type="text/javascript">
    function savePic(){
        var formData = new FormData($( "#uploadPic" )[0]);  
        var ajaxUrl = "${path}/rest/user/saveHeaderPic";
        //alert(ajaxUrl);
        //$('#uploadPic').serialize() 無法序列化二進制文件，這裏採用formData上傳
        //需要瀏覽器支持：Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
        $.ajax({
            type: "POST",
            //dataType: "text",
            url: ajaxUrl,
            data: formData,
            async: false,  
            cache: false,  
            contentType: false,  
            processData: false,
            success: function (data) {
            alert(data);
            },
            error: function(data) {
                alert("error:"+data.responseText);

             }
        });
        return false;
    }

JAVA後端:

/**
 * 頭像圖片上傳
 * @throws IOException 
 */
@RequestMapping(value = "/saveHeaderPic", method = RequestMethod.POST)
public void saveHeaderPic(@RequestParam("file") CommonsMultipartFile file, HttpServletRequest request, HttpServletResponse response) throws IOException {

        String resMsg = "";
    try {

        long  startTime=System.currentTimeMillis();

        System.out.println("fileName："+file.getOriginalFilename());
        String path="/Users/loukai/easylife/files/"+new Date().getTime()+file.getOriginalFilename();
        System.out.println("path:" + path);

        File newFile=new File(path);
        //通過CommonsMultipartFile的方法直接寫文件
        file.transferTo(newFile);
        long  endTime=System.currentTimeMillis();
        System.out.println("運行時間："+String.valueOf(endTime-startTime)+"ms");
        resMsg = "1";
    } catch (IllegalStateException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
        resMsg = "0";
    }
          response.getWriter().write(resMsg);

      }

運行測試，文件上傳成功！