最近都没时间整理资料了，一入职就要弄懂业务，整天被业务弄得血崩。
总结下今天弄了一个早上的跨域异步上传文件。主要用到技术有HTML5的FormData，AJAX，Spring MVC。
首先看下上传页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/plugins/jquery-1.8.3.min.js" ></script>
<title></title>
</head>
<body>
<input type="file" id="file_upload"/>
<input type="button" value="上传图片" id="upload"/>
</body>
<script type="text/javascript" src="js/upload.js" ></script>
</html>
上传页面很简单，就两个input元素。
然后看下upload.js。注意这个upload.js是自己写的，里面那个ajaxFileUpload并不是jQuery提供的那个上传插件的方法。
$(document).ready(function(){
function ajaxFileUpload(){
var formData = new FormData();
formData.append(‘file‘,$("#file_upload")[0].files[0]); //将文件转成二进制形式
$.ajax({
type:"post",
url:"http://localhost:8080/nitshareserver/serve/fileupload",
async:false,
contentType: false, //这个一定要写
processData: false, //这个也一定要写，不然会报错
data:formData,
dataType:‘text‘, //返回类型，有json，text，HTML。这里并没有jsonp格式，所以别妄想能用jsonp做跨域了。
success:function(data){
alert(data);
},
error:function(XMLHttpRequest, textStatus, errorThrown, data){
alert(errorThrown);
}
});
}
$("#upload").click(function(){
ajaxFileUpload();
});
});
前端这样就可以了，接下来看看服务端的写法。
服务端接口写法：
// @ResponseBody
@RequestMapping(value="fileupload", method=RequestMethod.POST,produces="text/html;charset=utf-8")
public void addPic(HttpServletResponse response,HttpServletRequest request,
@RequestParam(value="file", required=false) MultipartFile file) throws IOException{
System.out.println(file.getOriginalFilename());
response.getWriter().write("success");
response.setHeader("Access-Control-Allow-Origin", "*");
// return "success";
}
这里response.setHeader("Access-Control-Allow-Origin", "*");这句很重要，没有这句，前端接收不到返回的数据。Access-Control-Allow-Origin是HTML5中定义的一种服务器端返回Response header，用来解决资源（比如字体）的跨域权限问题。它定义了该资源允许被哪个域引用，或者被所有域引用（google字体使用*表示字体资源允许被所有域引用），但是在真正的产品中，是不会用*的。这里只是好方便演示。
那跑一下工程，看看前端会不会收到success吧。
结果：
服务端控制台：
转载注明出处：http://www.cnblogs.com/BigDreamer/
时间： 2024-12-26 19:31:52