Ueditor1.4.3实现跨域上传到独立文件服务器,完美解决单文件和多文件上传!

再写配置方法之前先吐槽一下网上的各种教程,TM没一个有卵用,一群傻屌不会写就别写,写了就要负责。

百度google搜了半天,全是配置什么document.domain,根域名什么的,我只想对你说:

好了,talk is cheap show me the code,言归正传:

首先去ue官网下载1.43版 .net版本,解压之后,把demo文件夹改成web,把net那个文件夹拷贝出来放到web外面,如图:

这样就把编辑器的静态文件和动态文件分离了,动态部分放到文件服务器上,静态部分集成到我们的网站上。

下面我就用c.com绑定到web目录,d.com绑定到net目录(a、b.com我在测试的时候用了)。
先在本地IIS创建两个站点,如图设置:

接下来要设置Hosts才能访问,这是模拟的绑定域名,打开C:\Windows\System32\drivers\etc找到hosts文件,用记事本打开在文件末尾增加两行:

127.0.0.1 c.com
127.0.0.1 d.com

保存后在浏览器上访问c\d.com就能访问到本地iis了,如果不能保存就先邮件hosts文件添加user用户权限设置为可修改就能保存了。

接下来打开a.com下面的index.html文件,把它里面的代码该删的删一下,工具栏重新设置一下保留用得到上传功能的:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>完整demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" charset="utf-8" src="/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/ueditor.all.js"> </script>
    <!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="/lang/zh-cn/zh-cn.js"></script>
</head>
<body>
<div>
    <h1>跨域上传</h1>
    <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
</div>
<script type="text/javascript">
    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor(‘editor‘)就能拿到相关的实例
    var ue = UE.getEditor(‘editor‘, {
        toolbars: [[
                ‘source‘,
                ‘simpleupload‘, //单图上传
                ‘insertimage‘, //多图上传]
                ‘attachment‘, //附件
                ‘scrawl‘, //涂鸦
                ‘wordimage‘, //图片转存
                ‘insertvideo‘//上传你视频
            ]]
    });
</script>
</body>
</html>

最终效果:

接下来打开c.com下面的ueditor.config.js, 找到:, serverUrl: URL + "net/controller.ashx"改成:, serverUrl: "http://d.com/controller.ashx"

接下来你打开浏览器调试,刷新页面就看得到请求d.com下面的controller.ashx获取上传参数了。【后面测试尽量用ctrl+f5刷新页面测试,不行就试试清除缓存】

现在你可以测试一下上传,次数单文件上传是能上传成功的,d.com下面已经有文件了,但是不能返回地址;多文件上传和涂鸦等上传失败,要报错:

XMLHttpRequest cannot load http://d.com/controller.ashx?action=uploadimage&encode=utf-8. Response to preflight request doesn‘t pass access control check: No ‘Access-Control-Allow-Origin‘ header is present on the requested resource. Origin ‘http://c.com‘ is therefore not allowed access.

这里有必要先提一下,ue的单文件上传是form提交到iframe,然后检测iframe里面的内容来返回结果,官方已经明确说明了单文件上传不能实现跨域上传,就是因为跨域的iframe是获取不到iframe里面的html代码的,所以现在不能获得上传地址,后面我有办法解决。而多文件上传和涂鸦这些用的是flash上传或者html5上传,这个就要用跨域的方法来解决,接下来先解决这个问题。

进入b.com目录下面。打开config.json,搜索 UrlPrefix": "/ueditor/net/",  全部改成 UrlPrefix": "http:/d.com/",  这是图片上传成功后的地址前缀,让它返回http://d.com/xxxx/xx/jpg。

接下来根据ue官方的文档是要在文件服务器上的controller.ashx里面添加header: Access-Control-Allow-Origin等,根据我的测试,卵用都没得!!要在iis上添加才行,别问我为什么,我也不晓得。

好了,现在来测试一下多图上传,成功了有木有!!涂鸦也能保存了!

不过现在单文件上传还是不能跨域,因为他是iframe的方式,要实现跨域还得费电周章。

好了,实现单文件跨域上传。首先要搞懂他的原理,它是提交到iframe去上传,然后监控iframe加载完成后js获取iframe里面的内容也就是json结果来得到图片上传结果。而跨域上传iframe里面的页面和当前页面不是同一个域名就获取不到json了,官方说暂时不支持,其实so easy,用传统的代理页面来解决,就是文件服务器上传成功后,不直接显示结果,而是跳转到c.com下面来的result.ashx页面来,把结果传递到这个页面上,再输出来,这样iframe就在同一个域名上了。

首先在c.com下面添加result.ashx:

<%@ WebHandler Language="C#" Class="UEditorHandler" %>

using System;
using System.Web;
using System.IO;
using System.Collections;

public class UEditorHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        var result=context.Request["result"];
        //当然这里最好判断一下result是否安全,不要接收到内容就显示这样会被人利用。
        if(result!=null)
            context.Response.Write(result.ToString());
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

因为只有单图上传也就是简单文件上传要用iframe方式所以我们要判断一下,只有简单文件上传才用这种方式。打开ueditor.all.js或者ueditor.all.min.js你页面上调用哪个就打开哪个,搜索<input id="edui_input_  在</form>之前加上:
<input type="hidden" name="issimpleupload" value="true" /> 这样上传后我们好通过获取issimpleupload来判断是不是简单文件上传。

初始化编辑器页面你调用哪个就加哪个页面,两个加上也成。

然后改d.com的处理文件,app_code里面的Handler.cs打开,第28行的大括号里面加上判断:

if (String.IsNullOrWhiteSpace(jsonpCallback))
        {
            var issimple = Request["IsSimpleUpload"];
            if (issimple != null && issimple.ToString()=="true")
            {
                Response.Redirect("http://c.com/result.ashx?result=" + json); //把json传递到c.com下面去呈现结果。
            }
            Response.AddHeader("Content-Type", "text/plain");
            Response.Write(json);
        }

到这里就特么大功告成了!!!

ue真心好用啊,尤其是针对个人站长,百度搜图,搜音乐,涂鸦,粘贴内容直接下载远程图片,文章内容分页等功能就是为站长量身订做的。

唯一的遗憾就是没有内容分页设置分页标题,不过我已经把分页标题扩展上去了。

时间: 2024-08-24 07:47:27

Ueditor1.4.3实现跨域上传到独立文件服务器,完美解决单文件和多文件上传!的相关文章

浏览器拦截跨域请求处理方法-firefox报错,同源策略不允许读取XXX上的远程资源

使用post请求域名不相同的资源的话,可以用cors跨域. 1) 在被请求的项目根目录(root下)下放以下文件 crossdomain.xml [html] view plaincopyprint? <?xml version="1.0"?> <!DOCTYPE cross-domain-policy SYSTEM "./cross-domain-policy.dtd"> <cross-domain-policy> <si

JSONP跨域请求数据报错 “Unexpected token :”的解决办法

原文  http://www.cnphp6.com/archives/65409 Jquery使用ajax方法实现jsonp跨域请求数据的时候报错 “Uncaught SyntaxError: Unexpected token :”,主要问题在于返回的数据格式不正确 本地虚拟两个域名,分别为:www.test.com.www.abc.com http://www.test.com/index.html页面点击按钮,请求返回 www.abc.com域名目录下的文件的数据 ,其代码为: <!DOCT

Flash Stage3D 在2D UI 界面上显示3D模型问题完美解决

一直以来很多Stage3D开发者都在为3D模型在2DUI上显示的问题头疼.Stage3D一直是在 Stage2D下面.为了做到3D模型在2DUI上显示通常大家有几种实现方式,下面来说说这几种实现方式吧. 实现方式1: 在2DUI上挖个洞透过去显示3D层.这种做法的缺陷在于如果两个UI界面同时打开就会UI错层显示错乱.为了解决这问题很多程序员选择了当挖洞显示3D的UI打时把其他界面隐藏掉,用户体验超差. 实现方式2: 利用Context3D 的 drawToBitmapData API 实时将3D

CSS实现背景透明而背景上的文字不透明完美解决

在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们需要一个半透明遮罩的弹出层,如登陆框.注册框.提示等,这时可能需要整个页面都要被半透 明的遮罩层覆盖,那么如用背景平铺的话,此时此刻也许就不是一个好办法了,图片大了会影响加载速度,图片小了同样会增加页面的渲染计算量,那么这时也许就 需要用CSS滤镜了. 假如有这样一个例子:“有一个DIV块,此DIV

跨域通信/跨域上传浅析

web项目跨域问题主要包括跨域通信和跨域上传,下面对这两方面分别做一个分析,具体项目中用哪个方案要看项目具体需求. 跨域通信 jsonp hash server proxy window.name cors postmessage redirect jsonp 原理:发起一个GET请求,回调函数带到请求参数中,把数据发送过去 坏处:服务器需要支持jsoncallback参数 好处:业界比较通用的方案,包括打点等操作都可以用类似技术 浏览器支持:chrome/firefox/safari/oper

异步上传文件并获得返回值(完全跨域)

http://blog.csdn.net/lrz1011/article/details/7913992 异步上传文件并获得返回值(完全跨域)AJAX可以进行数据的异步请求,但对于文件和跨域问题却束手无策. Jsonp可以进行跨域数据的异步请求,但同样不能使用于文件. <form>表单可以进行跨域数据和文件的上传,但却会使页面跳转. 那么如何同时实现“异步”+“跨域”+“文件”+“返回值”这几个特性呢?方法如下: 原理: 将<form>表单通过一个iframe来submit,也就是

【完全跨域】异步上传文件并获得返回值

AJAX可以进行数据的异步请求,但对于文件和跨域问题却束手无策. Jsonp可以进行跨域数据的异步请求,但同样不能使用于文件. <form>表单可以进行跨域数据和文件的上传,但却会使页面跳转. 那么如何同时实现“异步”+“跨域”+“文件”+“返回值”这几个特性呢?方法如下: 原理: 将<form>表单通过一个iframe来submit,也就是将<form>的target属性设置为一个iframe的id,这样<form>的action URL就会在这个ifra

Uploadify跨域上传原理

引用:http://www.cnblogs.com/me-sa/archive/2010/05/21/How-Uploadify-Cross-Domain.html < 回头再说:jQuery跨域原理 >一文提到浏览器的同源策略以及使用JsonP的方式实现跨域;在评论中金色海洋提出了一个问题: 我最近在用 uploadify + ashx 来做文件上传的功能.都测试成功了,但是发现我可以提交到其他的网站里面. 我是在本地测试了.两个网站,IP地址相同,使用端口来区分. 一个端口是8001,另一

跨域问题实践总结! 上(JSONP/document.domain/window.name)

1. JSONP 首先要介绍的跨域方法必然是 JSONP. 现在你想要获取其他网站上的 JavaScript 脚本,你非常高兴的使用 XMLHttpRequest 对象来获取.但是浏览器一点儿也不配合你,无情的弹出了下面的错误信息: XMLHttpRequest cannot load http://x.com/main.dat. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origi