让 umeditor 支持跨域上传图片

事实上，umeditor 上传图片采用的是 form+隐藏iframe方式，已经能做到无刷新跨域上传。但小小遗憾的是做的并不完美，上传图片后，反馈的json信息，js并不能读取。原因在于，js不能操作跨域的iframe。

1 var r = this.contentWindow.document.body.innerHTML;

此句代码在FF Chrome上都会报错。浏览器的这种限制，可以通过两个方式来解决

换成flash上传
主页跟iframe页都设置 document.domain 。

第一种方式，虽然可以完美实现，但对umeditor改动太多，后期维护更是麻烦。

第二种方式，如果页面太多就麻烦了，而且貌似只能设置同一个域名下的二级或三级域名（未亲测）

再经过一番搜索后，发现了第三种方式，实现起来很巧妙，能一劳永逸的解决问题。

思路为：比如你的主战是 a.com ，你要将图片传至b.com。那么a.com的代码为

1 <iframe src="b.com/upload.html" />

b.com/upload.html 再包含a.com的页面，并将js输出到a.com/crossiframe.html

1 <iframe src="a.com/crossiframe.html?js=alert(0)" />

此思路不仅可以只用来解决umeditor的图片上传问题，一样可以用在js操作跨域iframe的问题上。

让 umeditor 支持跨域上传图片

时间： 2024-11-05 16:04:08

让 umeditor 支持跨域上传图片的相关文章

跨域上传图片的尝试过程，最终成功了。哈哈

关于这个跨域上传图片的问题,其实去年底的时候就该去实现的,因为老板朝三暮四,一会儿让做这个,一会儿看那个,就耽误了.因为这个过程花费了我整整一天的时间,我认为有必要记录下来. 首先,项目是一个ERP,针对的是公司的一个小型电商的网站.项目经理让我搭建一个图片服务器, 当时也是为了完(尝)成(尝)任(新)务(鲜),用的都是当时从没接触过的.通过百度就选择了 Nginx + Nodejs + express + ImageMagick 来实现的. 当时还简单看了一下淘宝的TFS(Taobao Fil

ueditor富文本编辑器跨域上传图片解决办法

在使用百度富文本编辑器的过程中,如果是有一台单独的图片服务器就需要将上传的图片内容放到图片服务器,也就是比如在a.com的编辑器上传图片,图片要保存到img.com的跨域上传图片功能,而在ueditor官方文档中说不支持单图上传的跨域, 网上查了一下各种花里胡哨,一顿操作猛如虎,比如加document.domain,配置全域名的等等都是然并卵,我仔细研究了一下ueditor的demo文件,相出了一个折中办法,很简单只需要修改demo中两个地方的代码外加写一个上传接口即可. 首先引入页面uedit

让Apache 和nginx支持跨域訪问

1,怎样让Apache支持跨域訪问呢? 步骤: 改动httpd.conf,windows中相应的文件夹是:C:\wamp\bin\apache\Apache2.4.4\conf\httpd.conf 把LoadModule headers_module modules/mod_headers.so 前面的凝视删除改动改为: 即: <Directory /> AllowOverride none Require all granted Header set Access-Control-Al

ServiceStack支持跨域提交

//ServiceStack对浏览器有一定的限制 //修改AppHost.cs文件 using Funq;using ServiceStack;using ServiceStackTest.ServiceInterface; namespace ServiceStackTest{ public class AppHost : AppHostBase { /// <summary> /// Default constructor. /// Base constructor requires a

如何让你的 Asp.Net Web Api 接口，拥抱支持跨域访问。

由于 web api 项目通常是被做成了一个独立站点,来提供数据,在做web api 项目的时候,不免前端会遇到跨域访问接口的问题. 刚开始没做任何处理,用jsonp的方式调用 web api 接口,总是报一个错误,如下: 如果你想用JSONP来获得跨域的数据,WebAPI本身是不支持javascript的callback的,它返回的JSON是这样的: {"YourSignature":"嫁人要嫁程序员,钱多话少死得早"} 然而,JSONP请求期望得到这样的JSON

让Apache 和nginx支持跨域访问

1,如何让Apache支持跨域访问呢? 步骤: 修改httpd.conf,windows中对应的目录是:C:\wamp\bin\apache\Apache2.4.4\conf\httpd.conf 把LoadModule headers_module modules/mod_headers.so 前面的注释删除修改改为: 即: <Directory /> AllowOverride none Require all granted Header set Access-Control-All

iframe跨域上传图片

方案一:用jquery的$.post异步提交,然后把返回来的值用jquery填充到隐藏域中.可是$.post不支持跨域. jQuery.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的. 方案二:利用iframe以及jquery进行表单post提交.代码如下: == a.com/post.html == <script> function postcallback(data){ //code... } </script> <form action=&qu

Apache 和nginx支持跨域访问

nginx：支持跨域访问

在http节点中配置: #支持跨域访问 add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Headers X-Requested-With; add_header Access-Control-Allow-Methods GET,POST,OPTIONS; 参考网址:http://www.51testing.com/html/96/215196-829360.html