iframe无刷新跨域上传文件并获得返回值

原文：http://geeksun.iteye.com/blog/1070607

需求：从S平台上传文件到R平台，上传成功后R平台返回给S平台一个值，S平台是在一个页面弹出的浮窗里上传文件，所以不能用直接用向R平台submit的方式提交，换用一种类AJAX方式实现，此处用了target的方式，是一种伪AJAX.

提交页面代码：

Html代码  

1. <form name="form_add" method="post" action="b.action"  enctype="multipart/form-data" target="hidden_frame">  
2. <iframe name='hidden_frame' id="hidden_frame" style='display:none'></iframe>   
3. </form>  
4. <script type="text/javascript">     
5. function callback(msg){  
6.     if(msg == 0){  
7.         parent.$.nyroModalRemove();  
8.     }  
9. }     
10. </script>  

 form提交到的target的hidden_frame，这样看不出来页面跳转，callback为一个回调函数，接受上传action传回的值，根据传回值执行相应的操作。

处理上传文件的action代码：

 

Java代码  

1. response.setCharacterEncoding("UTF-8");  
2.         response.setContentType("text/html");  
3.         response.setHeader("Cache-Control", "no-cache");  
4.         response.addHeader("Access-Control-Allow-Origin", "*");  
5.         response.addHeader("Access-Control-Allow-Headers", "x-requested-with");  
6.         response.addHeader("Location", callUrl + "?msg=" + result);  
7.           
8.         response.sendRedirect(callUrl + "?msg=" + result);  

 callUrl为文件上传时提交的反调的callUrl，msg为回传的参数。

 callUrl为S平台的deal_callback.html，和上传的页面在同一目标下，页面代码为：

 

Html代码  

1. <script type="text/javascript">  
2.     var rs = window.location.search.split('?').slice(1);  
3.     window.parent.callback(rs.toString().split('=').slice(1));  
4. </script>  

 deal_callback.html是response跳转到的页面，里面就两行代码，跳转到deal_callback.html后，此页面调用上传页面的callback方法，将返回值传递过去，完成返回值的传递。

转载于:https://www.cnblogs.com/eggbucket/p/3270395.html