博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【完全跨域】异步上传文件并获得返回值
阅读量:6292 次
发布时间:2019-06-22

本文共 1446 字,大约阅读时间需要 4 分钟。

AJAX可以进行数据的异步请求,但对于文件跨域问题却束手无策。

Jsonp可以进行跨域数据的异步请求,但同样不能使用于文件。

<form>表单可以进行跨域数据和文件的上传,但却会使页面跳转。

那么如何同时实现“异步”+“跨域”+“文件”+“返回值”这几个特性呢?方法如下:

原理:

将<form>表单通过一个iframe来submit,也就是将<form>的target属性设置为一个iframe的id,这样<form>的action URL就会在这个iframe中打开,那么服务器的返回数据也就会输出到iframe中了。最后再通过主页面与iframe之间的交互完成对返回数据的读取(这涉及到跨域问题,文章后面将介绍此问题的解决方法)。

基本结构:

前端部分(当前域名:www.test.com,与form中的action域名相同)

// 注意,是name="upload",而不是id="upload"

后台部分

 

优化结构一:

前端部分(当前域名:a.test.com,与form中的action域名不同)

// 注意这里!
// 注意,是name="upload",而不是id="upload"

后台部分

' . '' // 注意这里! . '' . 'This data is from server!' // 返回数据,这行字将输出到iframe的body中 . ''; echo $html;?>

通过上面的优化,iframe从服务器接收到的内容中就多了一条<script>标签,这个标签的src是由<form>表单提交的,也就是说这个js文件可以放在任何域名下,并且通过修改该js的内容来制定这个iframe的功能。比如,在其中调用document.domain="test.com"后,便可以与主页面互相通信与控制了(主页面中也调用了document.domain="test.com",因此跨域限制被消除了)。

 

优化结构二:

前端部分(当前域名:www.a.com,与form中的action域名不同)

//注意这里!
//注意,是name="upload",而不是id="upload"

这次我们没有看到<script>标签,因为不再需要了,请继续看后台代码:

后台部分

与优化结构一不同的是,结构二中不再使用“指定document.domain为一级域名”来解除跨域限制,也不通过iframe的document内容来得到返回数据,而是通过使iframe直接跳转至当前域名(通过$_POST['tmpurl']指定)来彻底取消跨域限制并且通过url的search部分传递返回数据。

 

两种结构的对比:

跨域:优化结构一只可解决一级域名相同的情况下的跨域情况,而优化结构二可解决任何跨域,比如百度与google之间。

数据:优化结构一的返回数据无大小限制,而优化结构二的返回数据必须小于2K(因为数据是通过RUL传输的)。

转载地址:http://incta.baihongyu.com/

你可能感兴趣的文章
zip 数据压缩
查看>>
Python爬虫学习系列教程
查看>>
【数据库优化专题】MySQL视图优化(二)
查看>>
【转载】每个程序员都应该学习使用Python或Ruby
查看>>
PHP高级编程之守护进程,实现优雅重启
查看>>
PHP字符编码转换类3
查看>>
rsync同步服务配置手记
查看>>
http缓存知识
查看>>
Go 时间交并集小工具
查看>>
iOS 多线程总结
查看>>
webpack是如何实现前端模块化的
查看>>
TCP的三次握手四次挥手
查看>>
关于redis的几件小事(六)redis的持久化
查看>>
webpack4+babel7+eslint+editorconfig+react-hot-loader 搭建react开发环境
查看>>
Maven 插件
查看>>
初探Angular6.x---进入用户编辑模块
查看>>
计算机基础知识复习
查看>>
【前端词典】实现 Canvas 下雪背景引发的性能思考
查看>>
大佬是怎么思考设计MySQL优化方案的?
查看>>
<三体> 给岁月以文明, 给时光以生命
查看>>