SpringMvc+ajax实现文件跨域上传

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

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

　　前端页面代码如下：

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

　　前端js代码如下:

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

　　后端代码如下：

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

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

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

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

　　方法参数中的@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，但是此时文件已经上传到了后端服务器。如果前后端在同一个工程下则不会出现这个问题。

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

转载于:https://www.cnblogs.com/zhangyyaf/p/9279211.html