`
paulfzm
  • 浏览: 883091 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

iframe 跨域上传文件

 
阅读更多

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。


--EOF--

转自 :http://blog.leezhong.com/tech/2011/05/06/crossdomain-upload.html
分享到:
评论

相关推荐

    form+iframe解决跨域上传文件的方法

    总的来说,`form+iframe`解决跨域上传文件是一种传统而实用的技巧,尤其适用于不支持AJAX或CORS的老版本浏览器。但随着技术的发展,现代浏览器提供的CORS、Fetch API等机制已经成为更安全、更灵活的选择,建议在条件...

    HTML5 postMessage+iframe实现文件跨域异步上传

    在文件跨域上传场景中,通常由一个源(如用户界面所在的网页)向另一个源(如处理文件上传的服务器API)发送数据。 首先,我们创建一个包含文件上传表单的页面,表单需要设置`target`属性为一个`iframe`的ID,这样...

    文件上传,iframe跨域数据提交的实现

    总结,文件上传和iframe跨域数据提交的关键在于正确构建form表单,合理安排文件选择与提交的时机,以及正确处理iframe中的返回数据。这种方法虽然略显复杂,但在处理跨域提交和文件上传时非常实用,尤其在没有CORS...

    百度富文本框(Ueditor)自定义上传接口,并解决单图片上传的跨域问题

    最后,为了使Ueditor能够处理跨域上传,还需要在配置文件中开启`customDomain`并设置为`true`: ```javascript customDomain: true, ``` 完成以上步骤后,Ueditor就应该能够通过你自定义的接口进行跨域图片上传了...

    UEditor 编辑器跨域上传解决方法

    以上就是在使用UEditor编辑器时解决跨域上传问题的一些方法。这些方法虽然在不同的浏览器中有所不同,但是核心思想都是通过设置document.domain属性来规避浏览器的同源策略限制。需要注意的是,这种跨域方法虽然方便...

    java跨全域兼容ie/ff/chrome浏览器多文件上传(原创)

    5. **IFrame**: IFrame(内联框架)常用于解决跨域问题,特别是在文件上传时。通过隐藏的IFrame,可以提交表单到不同的域而不违反同源策略。在这个方案中,IFrame可能是用来隐藏文件上传过程,同时处理返回的结果。 ...

    高度自适应 跨域访问实例下载

    在这个"高度自适应跨域访问实例下载"中,我们看到三个HTML文件:iframe.html、agent.html和main.html,它们可能是用于演示如何在不同环境下实现跨域通信和页面适应性。 1. **跨域访问**:在Web浏览器的安全策略下,...

    js加iframe轻松实现异步图片上传 可以预览 兼容FF,chrome,ie9

    在图片上传场景下,IFrame常用于解决跨域问题和模拟POST提交,因为它可以创建一个独立的上下文环境,使得文件上传操作不会影响到主页面。 以下是实现步骤: 1. 创建一个`&lt;input type="file"&gt;`元素,让用户选择需要...

    Jquery实现跨域异步上传文件总结

    总的来说,跨域异步上传文件涉及到多个技术和策略,包括jQuery.form插件、CORS、JSONP以及IFrame。理解并掌握这些技术是开发现代Web应用所必需的,尤其是在涉及多平台兼容性时。通过合理地运用这些工具和方法,我们...

    AjaxUpload.rar 文件上传

    AjaxUpload是一种基于JavaScript和Ajax技术实现的异步文件上传方式,它允许用户在不刷新整个网页的情况下上传文件,显著提升了用户体验。AjaxUpload的核心是利用XMLHttpRequest对象与服务器进行交互,通过创建隐藏的...

    ajax iframe上传.

    而纯AJAX上传文件存在一个问题,由于浏览器的安全限制,XMLHttpRequest对象无法跨域发送PUT或POST请求,这在文件上传时通常需要用到。因此,利用iframe作为目标可以解决这个问题,因为iframe允许跨域提交。 以下是...

    无刷新上传文件

    FancyUpload可能使用IFrame或者Flash技术作为后端通信的桥梁,因为这些技术能解决跨域问题并兼容老版本的浏览器。 无刷新上传文件的后端处理通常涉及multipart/form-data编码的处理。当前端使用FormData发送文件时...

    iframe实现无刷新上传下载

    "iframe实现无刷新上传下载"是一个利用IFrame和JQuery技术来创建的项目,它允许用户在不刷新整个页面的情况下进行文件的上传和下载操作,提高了交互效率,同时也保持了页面状态的连续性。 首先,我们要理解什么是...

    jQuery-1.8.3(&2.1.4).min.js&jquery;.fileupload&jquery;.iframe-transport

    jQuery Iframe Transport是jQuery File Upload的一部分,主要解决大型文件或者需要跨域上传时的问题。由于浏览器的安全策略,某些情况下普通的Ajax上传可能无法工作,这时Iframe Transport通过创建一个隐藏的iframe...

    通过隐蔽iframe实现无刷新上传文件操作_.docx

    总结来说,通过隐蔽的iframe实现无刷新上传文件操作,可以提供流畅的用户体验。这种方式结合ReactJS、AmazeUI和Node.js,利用iframe的特性以及JavaScript的事件处理机制,能够有效地处理文件上传并在上传完成后更新...

    .net文件上传控件

    7. **跨域上传**:如果需要在多个域之间进行文件上传,需要处理CORS(跨源资源共享)设置,确保服务器允许从其他域名发送上传请求。 总之,.NET文件上传控件是一个复杂但重要的功能,涉及到前端交互、后端处理、...

    php+iframe 实现上传文件功能示例

    在这种情况下,可以使用PHP结合HTML的iframe元素来实现实时上传文件并显示结果。以下是对这个技术的详细解释: ### 1. 什么是iframe? iframe(Inline Frame)是HTML中的一个标签,它允许我们在一个网页内嵌入另一...

    java web ajax异步提交方式上传文件

    它处理了文件上传的复杂性,如创建隐藏IFrame、处理跨域问题等,使得文件上传变得简单。 4. **Ajax**:Asynchronous JavaScript and XML(异步JavaScript和XML)是一种在不刷新整个页面的情况下更新部分网页的技术...

Global site tag (gtag.js) - Google Analytics