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);      }

运行测试，文件上传成功！