需求:从S平台上传文件到R平台,上传成功后R平台返回给S平台一个值,S平台是在一个页面弹出的浮窗里上传文件,所以不能用直接用向R平台submit的方式提交,换用一种类AJAX方式实现,此处用了target的方式,是一种伪AJAX.
文件上传--form.html:
<form name="form_add" method="post" action="b.action" enctype="multipart/form-data" target="hidden_frame"> <iframe name='hidden_frame' id="hidden_frame" style='display:none'></iframe> </form> <script type="text/javascript"> function callback(msg){ if(msg == 0){ parent.$.nyroModalRemove(); } } </script>
form提交到的target的hidden_frame,这样看不出来页面跳转,callback为一个回调函数,接受上传action传回的值,根据传回值执行相应的操作。
处理上传文件--handler.action:
response.setCharacterEncoding("UTF-8"); response.setContentType("text/html"); response.setHeader("Cache-Control", "no-cache"); response.addHeader("Access-Control-Allow-Origin", "*"); response.addHeader("Access-Control-Allow-Headers", "x-requested-with"); response.addHeader("Location", callUrl + "?msg=" + result); response.sendRedirect(callUrl + "?msg=" + result);
callUrl为文件上传时提交的反调的callUrl,msg为回传的参数。
callUrl为S平台的deal_callback.html,和上传的页面在同一目标下,回调页面--deal_callback.html:
<script type="text/javascript"> var rs = window.location.search.split('?').slice(1); window.parent.callback(rs.toString().split('=').slice(1)); </script>
deal_callback.html是response跳转到的页面,里面就两行代码,跳转到deal_callback.html后,此页面调用上传页面的callback方法,将返回值传递过去,完成返回值的传递。
Quote: http://blog.leezhong.com/tech/2011/05/06/crossdomain-upload.html
相关推荐
`form+iframe`是一种常见的解决跨域上传文件的方法。这是因为HTML的`<form>`元素与`<iframe>`结合使用可以实现异步无刷新的数据提交,而`<iframe>`能够承载另一个源的页面,从而规避同源策略的限制。 首先,我们来...
"js跨域iframepostMessage提交表单"的解决方案提供了一种优雅的方式,使得在不刷新页面的情况下,能够实现跨域提交表单,包括含文件上传的部分,并且能够接收返回值。以下将详细解析这个技术点。 首先,跨域是由于...
最近的一个项目中,需要通过 JavaScript 提交表单数据到另一个域名下的PHP接口(因为数据较大,需要HTTP POST方式提交),并获取PHP接口的返回值,在页面无刷新、无跳转的情况下,更新div标签内的内容。 浏览器...
当子窗口执行完成其任务并准备关闭时,可以调用以下代码来刷新父窗口: ```javascript // 使用window.opener属性引用父窗口 // 修改父窗口的location.href,可以用来跳转到新的URL或刷新页面 window.opener....
4. 跨域iframe的创建:在使用JavaScript创建iframe元素时,如果涉及到跨域,需要注意不能直接通过JavaScript设置iframe的document.domain,而应该通过加载iframe的页面地址来实现。 5. 编辑器的域问题:在使用...
12. **跨域通信**:CORS(Cross-Origin Resource Sharing)和其他技术允许JavaScript进行跨域请求,如JSONP和iframe。 13. **Web APIs**:JavaScript可以利用浏览器提供的API,如地理位置API、Web Storage...
12. **跨域通信**:如JSONP、CORS、iframe等技术,用于解决同源策略限制下的数据交换问题。 13. **模块系统**:CommonJS(Node.js)和ES模块(import/export)是JavaScript的两种主要模块化方案。 "JavaScript语言...
- 函数:函数是可重用的代码块,可以接受参数并返回值。 3. **ES6及新特性**: - 箭头函数:简洁的函数定义方式,改变了this的指向规则。 - 类与继承:ES6引入了类的概念,提供了更面向对象的编程方式。 - 解构...
4. **AJAX**:异步JavaScript和XML技术,用于在不刷新整个页面的情况下,向服务器请求数据并更新部分网页内容。 5. **ES6及后续版本新特性**:箭头函数、解构赋值、模板字符串、let和const、class语法、Promise、...