SpringMvc+ajax实现文件跨域上传

　　最近开始学习SpringMVC框架，在学习数据绑定的时候，发现可以使用@RequestParam注解绑定请求数据，实现了文件上传。但是如果一个项目是前后端分离的，前端系统向后端服务上传文件该怎么解决了？

　　首先考虑前端用哪一种方式进行文件上传，我选择了使用ajax的方式进行上传.

　　前端页面代码如下：

　　

<div id="login-window">
　　　<input type="file" id="file_upload"/>
　　　<input type="button" value="上传图片" id="upload"/>
</div>

 

　　前端js代码如下:

　　

$("#upload").click(function(){
　　　　　　 var formData = new FormData();
　　　　　　formData.append('file',$("#file_upload")[0].files[0]);
　　　　　　$.ajax({
　　　　　　　　type:"post",
　　　　　　　　url:"http://127.0.0.1:8080/SpringMVC/Ajax/jsupload",
　　　　　　　　async:false,
　　　　　　　　contentType: false, //这个一定要写，发送信息至服务器时内容编码类型
　　　　　　　　processData: false, //这个也一定要写，默认值: true。默认情况下，通过data选项传递进来的数据，
　　　　　　　　　　　　　　　　   //如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，
                 // 以配合默认内容类型 "application/x-www-form-urlencoded"。
//如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
　　　　　　　　data:formData,
　　　　　　　　dataType:'text', //返回类型，有json，text，HTML。这里并没有jsonp格式，所以别妄想能用jsonp做跨域了。
　　　　　　　　success:function(data){
　　　　　　　　　　 console.log("上传完成")
　　　　　　　　},
　　　　　　　　error:function(XMLHttpRequest, textStatus, errorThrown, data){
　　　　　　　　　　alert(errorThrown);
　　　　　　　　}
　　　　　　　});
　　　　　　});

 

　　后端代码如下：

　　后端代码写之前需要在Springmvc的配置文件中配置文件上传信息

　　

<!-- 配置文件上传参数 -->
　　　　　　<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
　　　　　　　　<!--此处是配置限制文件上传大小，可以不用配置，采用默认值-->
　　　　　　　　<property name="maxUploadSize">
　　　　　　　　　　<value>1048576</value>
　　　　　　　　</property>
　　<!--此处是配置文件上传的字符集类型，防止乱码-->
　　　　　　　　<property name="defaultEncoding">
　　　　　　　　　　<value>UTF-8</value>
　　　　　　　　</property>
　　　　　　</bean>

　　配置完可以在SpringMVC的Controller类里面写上传的方法：

@RequestMapping(value="/jsupload",method={RequestMethod.POST})
public void paramBind(HttpServletRequest request,HttpServletResponse response,@RequestParam("file")CommonsMultipartFile formFile){
　　　　　　MultipartFile formFile1 = ((MultipartHttpServletRequest)request).getFile("file");
　　　　　　String path="E:/"+new Date().getTime()+formFile.getOriginalFilename();
          File newFile=new File(path);
　　　　　　try {
　　　　　　　　formFile.transferTo(newFile);
　　　　　　} catch (IllegalStateException e) {
　　　　　　　　e.printStackTrace();
　　　　　　} catch (IOException e) {
　　　　　　　　e.printStackTrace();
　　　　　　}
　　　　　　　　response.setHeader("Access-Control-Allow-Origin", "*");
　　　　}

　　方法参数中的@RequestParam("file")CommonsMultipartFile formFile是采用注解的方式实现数据绑定。

　　在方法的最后response.setHeader("Access-Control-Allow-Origin", "*");这一行代码是实现ajax跨域传输的关键，如果是跨域传输，但是没有在响应头信息中设置Access-Control-Allow-Origin的值为 "*"， 则会在前端控制台上提示：No 'Access-Control-Allow-Origin' header is present on the requested resource，但是此时文件已经上传到了后端服务器。如果前后端在同一个工程下则不会出现这个问题。

　　以上代码可以完成简单的前后端跨域传输。（学习笔记，如有错误感谢指正，不喜勿喷）