SpringMVC Ajax上传文件实例

做了一个文件上传模块,因为传统的form提交会有页面刷新,不符合我的使用要求,所以我采用Ajax提交方式,这里说明下,我的应用程序前端为Ajax提交,后端SpringMVC接收处理。

传统form提交文件方式:

采用Ajax提交文件,我先后出现了如下两个问题:

Ajax post 400 (Bad Request)

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:

提交

JS脚本:


                    
                    

你可能感兴趣的:(SpringMVC Ajax上传文件实例)