UEditor1.4.3實現跨域上傳到獨立文件服務器，完美解決單文件和多文件上傳！

時間 2019-11-12

標籤 ueditor1.4.3 ueditor 實現上傳獨立文件服務器完美解決文件简体版

原文原文鏈接

在寫配置方法以前先吐槽一下網上的各類教程，TM沒一個有卵用，一羣傻屌不會寫就別寫，寫了就要負責。javascript

百度google搜了半天，全是配置什麼document.domain，根域名什麼的，我只想對你說：html

好了，talk is cheap show me the code，言歸正傳：html5

首先去ue官網下載1.43版 .net版本，解壓以後，把demo文件夾改爲web，把net那個文件夾拷貝出來放到web外面，如圖：java

這樣就把編輯器的靜態文件和動態文件分離了，動態部分放到文件服務器上，靜態部分集成到咱們的網站上。web

下面我就用c.com綁定到web目錄，d.com綁定到net目錄(a、b.com我在測試的時候用了)。
先在本地IIS建立兩個站點，如圖設置：json

接下來要設置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用戶權限設置爲可修改就能保存了。緩存

接下來打開c.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上傳，這個就要用跨域的方法來解決，接下來先解決這個問題。

進入d.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上添加才行，別問我爲何，我也不曉得。

添加這兩個就好了：

Access-Control-Allow-Origin：* （*表示任何域名，若是填寫具體的域名的話，用http開頭）
Access-Control-Allow-Headers：X-Requested-With,X_Requested_With

好了，如今來測試一下多圖上傳，成功了有木有！！塗鴉也能保存了！

不過如今單文件上傳仍是不能跨域，由於他是提交到iframe的方式，要實現跨域還得費點周章。

好了，實現單文件跨域上傳。首先要搞懂它的原理，它是提交到iframe去上傳，而後監控iframe加載完成後js獲取iframe裏面的內容也就是json結果來獲得圖片上傳結果。而跨域上傳iframe裏面的頁面和當前頁面不是同一個域名就獲取不到json了，官方說暫時不支持，其實so easy，用傳統的代理頁面來解決，就是文件服務器上傳成功後，不直接顯示結果，而是跳轉到c.com下面來的result.ashx頁面來，把結果傳遞到這個頁面上，再輸出來，這樣iframe就在同一個域名上了，js就能直接獲取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真心好用啊，尤爲是針對我的站長，百度搜圖，搜音樂，塗鴉，粘貼內容直接下載遠程圖片，文章內容分頁等功能就是爲站長量身訂作的。

惟一的遺憾就是沒有內容分頁設置分頁標題，不過我已經把分頁標題擴展上去了。