iframe无刷新跨域上传文件并获取返回值
通常我们会有一个统一的上传接口,这个接口会被其他的服务调用。如果出现不同域,还需要无刷新上传文件,并且获取返回值,这就有点麻烦了。比如,新浪微博启用了新域名www.weibo.com,但接口还是使用原来的域: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无刷新跨域上传文件并获得返回值
原文:http://geeksun.iteye.com/blog/1070607 需求:从S平台上传文件到R平台,上传成功后R平台返回给S平台一个值,S平台是在一个页面弹出的浮窗里上传文件,所以不能用 ...
- form+iframe+file 页面无刷新上传文件并获取返回值
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- js跨域上传文件 iframe
封装好的jq插件 (function () { var iframe = '<iframe name="jqUploadIframe" style="display ...
- Angular4 后台管理系统搭建(10) - 做一个通用的可跨域上传文件的组件
写的很慢,不知不觉这是第十篇了.但是我其他事情太多,只能抽空写下.现在angular4或angular2流行的上传方式是ng2-file-upload.它的功能很强大.但是我没有配置成可以跨域上传的. ...
- iframe无刷新跨域并获得返回值
参考:http://geeksun.iteye.com/blog/1070607 /** * iframe跨域提交大数据 * @param action 跨域地址 * @param arr [ {na ...
- springmvc结合ajax实现跨域上传文件
本方法的思路是:先在前端利用FileReader将图片转换成base64编码,然后将编码字符串形式传递到后台(前提是服务端设置了允许跨域),后端再把base64编码转换成图片. 前端代码: <! ...
- asp.net跨域上传文件
前端: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" con ...
- POST方式跨域上传文件
JSONP请求有限制: 第一,不能跳出两层, 第二,不支持POST. 往往解决跨域POST请求的方案是个"古老"方法, 请求同域下的iframe. 服务器端: 需要附加头信息: ...
- [javascript] ajaxfileupload.js 跨域上传文件
原文地址: http://www.ueffort.com/jqueryajaxfileupload-js-duo-wen-jian-shang-chuan-chuan-zhi-kua-yu/ 跨域 这 ...
随机推荐
- python一个简单的登录
文件目录下有两个文件 user_name.txt lock_file.txt 实际中可以读数据库里的信息 代码如下 #encoding = utf-8 import sys user_file = ' ...
- IUnknown—COM和MFC
http://www.vckbase.com/index.php/wv/60 问题: 我用MFC编写COM程序有一段时间了,知道如何使用宏和嵌套类,以及如何在嵌套类中处理IUnknown接口,但对IU ...
- 采用TL026等构成的宽带ALC放大器电路图
Building a Differential Amplifier An op-amp with no feedback is already a differential amplifier, am ...
- Entity Framework Code First迁移基本面拾遗
项目中用到了EF Code First和迁移,但发现有些方面似懂非懂.比如:如何在迁移文件中控制迁移过程?如果在迁移文件中执行SQL语句?如何使用Update-Database的其它参数?数据库在生产 ...
- git的几十个基本面
1.下载git?git-scm.com 2.获取帮助git helpgit help config 3.什么是Git?版本控制系统,Version Control System, VCS.它允许我们提 ...
- 用node-webkit 开发 PC 客户端
7月 3 2013 导言 node-webkit 是一个很神奇的桌面客户端项目,正如这个项目的名字,这个项目是由node 和 webkit 构成,简单来说,就是你可以用HTML 5和 node 进 ...
- 七牛CEO许式伟:移动游戏资源存贮的大趋势
(国内知名Android开发论坛eoe开发者社区推荐:http://www.eoeandroid.com/) 9月14日,eoe移动开发者大会正式在北京国家会议中心召开,七牛云储存CEO许式伟先生做了 ...
- EF Repository Update
问题描述: 解决办法: http://www.cnblogs.com/scy251147/p/3688844.html 原理: Attaching an entity of type '' faile ...
- MySql 数据操作类
/// <summary> /// MySqlHelper 的摘要说明. /// </summary> public class MySqlHelper { public st ...
- mshadow笔记
矩阵维度表示和正常相反. a[2][3],行2列3,a.shape.shape_[0]=3,a.shape.shape_[1]=2. pred.Resize( Shape2( batch_size, ...