最近都没时间整理资料了，一入职就要弄懂业务，整天被业务弄得血崩。
总结下今天弄了一个早上的跨域异步上传文件。主要用到技术有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" ></scriptTitle</bodyinput ="file" ID="file_upload"/> ="button" value="上传图片"="upload"/> ="Js/upload.Js" >
上传页面很简单，就两个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: 这个也一定要写，不然会报错 data:formData,dataType:'text',0)">返回类型，有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/
总结以上是内存溢出为你收集整理的（H5）FormData+AJAX+SpringMVC跨域异步上传文件全部内容，希望文章能够帮你解决（H5）FormData+AJAX+SpringMVC跨域异步上传文件所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）