之前用ajaxsubmit想做跨域post提交文件并返回文件地址
,无果,转而采用第二种方式。
利用FormData,ajax,spingMVC
jsp页面<!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"> $(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(); }); }); </script> </html>
下面是后台处理页面
@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 "fileAddress"; }这里response.setHeader("Access-Control-Allow-Origin", "*");这句很重要,没有这句,前端接收不到返回的数据。Access-Control-Allow-Origin是HTML5中定义的一种服务器端返回Response header,用来解决资源(比如字体)的跨域权限问题。它定义了该资源允许被哪个域引用,或者被所有域引用(google字体使用*表示字体资源允许被所有域引用),但是在真正的产品中,是不会用*的。这里只是好方便演示。
就这样就能实现跨域和ajax上传图片了