iframe无刷新跨域上传文件并获取返回值
2014-09-01 16:58
316 查看
[java]
view plaincopy
无网不剩
retweet
iframe无刷新跨域上传文件并获取返回值
通常我们会有一个统一的上传接口,这个接口会被其他的服务调用。如果出现不同域,还需要无刷新上传文件,并且获取返回值,这就有点麻烦了。比如,新浪微博启用了新域名<a href="http://www.weibo.com">www.weibo.com</a>,但接口还是使用原来的域:picupload.t.sina.com.cn。
研究了一下新浪微博的处理方法,这里大概演示一下。
首先是一个正常的上传页面 upload.html
<script>
// 这个函数将来会被iframe用到
function getIframeVal(val)
{
alert(val);
}
</script>
<!-- 我把upload.com指向了127.0.0.1 -->
<form method="post" target="if" enctype="multipart/form-data" action="http://upload.com/playground/js/deal.php?cb=http://localhost/playground/js/deal_cd.html">
<input type="file" name="file" />
<input type="SUBMIT" value="upload" />
</form>
<IFRAME id="if" name="if" src="about:blank" frameborder='0'></IFRAME>
这里有一个关键点是form的target要指向iframe,同时把iframe隐藏起来,这样上传的处理结果就会显示在该iframe里。action里的cb(callback)参数表示处理完成后要跳转的url,因为我们的目标是iframe,所以只会把跳转的页面输出到iframe,而不会让当前页面跳转。
还有一点,callback url要和当前页面同域。跨域的iframe无法调用父页面的内容。
再来看看deal.php,也就是form的action
<?php
// deal upload file
// and get file id, you can pass other params either
header('location:'.$_GET['cb'].'?file_id=123');
这里可以处理文件,然后入库。操作完成后,把文件的id及其他信息都放在url里,最后跳转到这个url。
最后来看看deal_cd.html,也就是刚刚deal.php跳转到的url,这个文件的内容会填充到页面的iframe里。
<script type="text/javascript">
var rs = window.location.search.split('?').slice(1);
window.parent.getIframeVal(rs.toString().split('=').slice(1));
</script>
这里调用了父窗口的getIframeVal方法,这样父页面就获得了文件的id。
view plaincopy
无网不剩
retweet
iframe无刷新跨域上传文件并获取返回值
通常我们会有一个统一的上传接口,这个接口会被其他的服务调用。如果出现不同域,还需要无刷新上传文件,并且获取返回值,这就有点麻烦了。比如,新浪微博启用了新域名<a href="http://www.weibo.com">www.weibo.com</a>,但接口还是使用原来的域:picupload.t.sina.com.cn。
研究了一下新浪微博的处理方法,这里大概演示一下。
首先是一个正常的上传页面 upload.html
<script>
// 这个函数将来会被iframe用到
function getIframeVal(val)
{
alert(val);
}
</script>
<!-- 我把upload.com指向了127.0.0.1 -->
<form method="post" target="if" enctype="multipart/form-data" action="http://upload.com/playground/js/deal.php?cb=http://localhost/playground/js/deal_cd.html">
<input type="file" name="file" />
<input type="SUBMIT" value="upload" />
</form>
<IFRAME id="if" name="if" src="about:blank" frameborder='0'></IFRAME>
这里有一个关键点是form的target要指向iframe,同时把iframe隐藏起来,这样上传的处理结果就会显示在该iframe里。action里的cb(callback)参数表示处理完成后要跳转的url,因为我们的目标是iframe,所以只会把跳转的页面输出到iframe,而不会让当前页面跳转。
还有一点,callback url要和当前页面同域。跨域的iframe无法调用父页面的内容。
再来看看deal.php,也就是form的action
<?php
// deal upload file
// and get file id, you can pass other params either
header('location:'.$_GET['cb'].'?file_id=123');
这里可以处理文件,然后入库。操作完成后,把文件的id及其他信息都放在url里,最后跳转到这个url。
最后来看看deal_cd.html,也就是刚刚deal.php跳转到的url,这个文件的内容会填充到页面的iframe里。
<script type="text/javascript">
var rs = window.location.search.split('?').slice(1);
window.parent.getIframeVal(rs.toString().split('=').slice(1));
</script>
这里调用了父窗口的getIframeVal方法,这样父页面就获得了文件的id。
相关文章推荐
- iframe无刷新跨域上传文件并获取返回值
- iframe无刷新跨域上传文件并获取返回值
- iframe无刷新跨域上传文件并获得返回值
- 利用iframe上传文件获取返回值的跨域问题
- Ajax上传文件,获取返回值,拒绝页面刷新
- (原创)js提交文件,js上传文件,纯js解决无刷新文件上传,不使用form提交文件,并获取返回值(路径url)
- iframe无刷新上传文件
- iframe实现无刷新上传文件
- ajax(iframe)无刷新提交表单、上传文件
- 无刷新多文件上传(iframe)
- dhl:页面无刷新ajax上传文件--模拟iframe,超简单
- php+iframe实现隐藏无刷新上传文件
- asp.net 文件上传与刷新与asp.net页面与iframe之间的数据传输
- asp.net 文件上传与刷新与asp.net页面与iframe之间的数据传输
- Iframe 无刷新上传文件
- 无刷新文件上传之一:传统iframe实现
- 隐藏iframe无刷新上传文件
- iFrame应用实例讲解——页面无需刷新的异步文件上传!
- php利用iframe实现无刷新文件上传功能的代码
- ajax(iframe)无刷新提交表单、上传文件