Ueditor 前后端分離實現文件上傳到獨立服務器


關於Ueditor 前后端分離實現文件上傳到獨立服務器,在網上搜索確實遇到大坑,不過還好遇到了 虛若影 最終實現了,在此感謝!
虛若影的原文博客網址:http://www.cnblogs.com/hpnet/p/6290452.html

具體項目:如下截圖

1.在本地IIS 中添加網站 ueditorweb.com 、ueditortest.com 、 testweb (注意應用程序池要選擇.net的版本

2.hosts文件中添加

127.0.0.1  ueditorweb.com  ueditor后台上傳處理程序

127.0.0.1  ueditortest.com   ueditor前台使用項目1

127.0.0.1  testweb.com        ueditor前台使用項目2

3.在接下來打開ueditortest.com 和 testweb.com下面的ueditor.config.js, 找到:, serverUrl: URL + "net/controller.ashx"改成:, serverUrl: "http://ueditorweb.com/controller.ashx" 

4.在ueditorweb.com項目下。打開config.json,搜索 Prefix": "/ueditor/net/",  全部改成 UrlPrefix": "http://ueditorweb.com/",  這是圖片上傳成功后的地址前綴。

5.多圖上傳、附件、視頻等上傳的實現設置:(兩種方法)

(1)ueditorweb.com項目下配置web.config

    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Headers" value="Content-Type,X_Requested_With" />
                <add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS,TRACE,HEAD" />
                <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>

(2)在IIS中添加

注意:Access-Control-Allow-Origin:* 表示允許任何域名跨域訪問

我這里使用*是因為有多個網站需要用到為了實現單圖片上傳,如果只有一個網站用到,為了安全最好使用 Access-Control-Allow-Origin:http://ueditortest.com

好了,至此多圖上傳、附件、視頻等,就能實現上傳了

6.單圖片上傳,使用iframe跨域,實現起來比較麻煩

在ueditor前台應用項目中添加result.ashx 代碼如下(下面要用到,如果是多個項目,每個項目都添加

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            var result = context.Request["result"];
            //當然這里最好判斷一下result是否安全,不要接收到內容就顯示這樣會被人利用。
            if (result != null)
                context.Response.Write(result.ToString());
            //context.Response.Write("Hello World");
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }

打開ueditor.all.js或者ueditor.all.min.js你頁面上調用哪個就打開哪個,搜索<input id="edui_input_  在</form>之前加上:

<input type="hidden" name="issimpleupload" value="true" /> 這樣上傳后我們好通過獲取issimpleupload來判斷是不是簡單文件上傳。

 

ueditor.all.js

ueditor.all.min.js

打開ueditorweb.com項目中App_Code文件夾中Handler.cs,將WriteJson方法修改替換成如下代碼

    protected void WriteJson(object response)
    {
        string jsonpCallback = Request["callback"],
            json = JsonConvert.SerializeObject(response);
        if (String.IsNullOrWhiteSpace(jsonpCallback))
        {
            var webupload = Request["webupload"];
            var weburl = "ueditortest.com";
            if (webupload != null)
            {
                switch (webupload)
                {
                    case "ueditortest":
                        weburl = "ueditortest.com";
                        break;
                    case "testweb":
                        weburl = "testweb.com";
                        break;
                }
            }

            var issimple = Request["IsSimpleUpload"];
            if (issimple != null && issimple.ToString() == "true")
            {
                Response.Redirect("http://" + weburl + "/result.ashx?result=" + json); //把json傳遞到c.com下面去呈現結果。
            }
            Response.AddHeader("Content-Type", "text/plain");
            Response.Write(json);
        }
        else 
        {
            Response.AddHeader("Content-Type", "application/javascript");
            Response.Write(String.Format("{0}({1});", jsonpCallback, json));
        }
        Response.End();
    }

至此,ueditor上傳圖片、附件、視頻、截圖、塗鴉等功能都能上傳獨立的服務器上。

在此還要感謝下 虛若影 感謝 感謝 非常感謝!!!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM