ext js/Ext.Net_演示 htmleditor 上传&插入图片

本文内容

• 解决方案结构
• HtmlEditor_Upload.js 脚本
• HtmlEditorUploadImg.ashx 上传图片到服务器
• 演示 htmleditor 控件添加插入图片功能

 

解决方案结构

---

图 1 解决方案结构

说明：

• Handle 目录，是上传图片到服务器端的 Handle 处理程序；Handle2 目录，功能 Handle 目录里一样，只是另外一种写法，各有优点。Handle2 目录里的方法是目录在任何位置都能上传，而 Handle 目录里的，因为是 .net 自己封装的，需要上传目录在网站目录下，这样，如果把上传目录放在虚拟目录或是其他应用程序下就不行。看你的需求是什么，如果将来可能要做图片服务器，那 Handle2 里的方式比较合适。
• Images 目录，是扩展 ext js/Ext.Net htmleditor 控件功能需要的相关图标。
• Js 目录里的 HtmlEditor_Upload.js 文件，是扩展 ext js/Ext.Net htmleditor 控件功能的脚本，使其具备插入图片功能。
• UploadImgs 目录，是上传图片保存到服务器的目录。
• MsgInfo 类，是封装上传图片到服务器端后，服务器返回给客户端的自定义状态信息。
• WebForm1.aspx 页面，是演示扩展 ext js/Ext.Net htmleditor 控件功能。

 

HtmlEditor_Upload.js 脚本

---

HtmlEditor_Upload.js 是利用 ext js/Ext.Net 扩展其 htmleditor 功能，使它具备插入图片功能。如下代码所示：

HTMLEditor = Ext.extend(Ext.form.HtmlEditor, {

    // 加入图片 

    addImage: function () {

        var editor = this;

        // 创建选择上传图片的表单

        var imgform = new Ext.FormPanel({

            region: 'center',

            labelWidth: 55,

            frame: true,

            bodyStyle: 'padding:5px 5px 0',

            autoScroll: true,

            border: false,

            fileUpload: true,

            items: [{

                xtype: 'textfield',

                fieldLabel: '选择文件',

                name: 'userfile',

                inputType: 'file',

                allowBlank: false,

                blankText: '文件不能为空',

                height: 25,

                width: 300

            }

                        ],

            buttons: [{

                text: '确定',

                type: 'submit',

                handler: function () {

                    if (!imgform.form.isValid()) { return; }

                    imgform.form.submit({

                        waitTitle: '提示',

                        waitMsg: '正在上传……',

                        method: 'post',

                        url: 'Handle/HtmlEditorUploadImg.ashx',

                        // 

                        success: function (form, action) {

                            var element = document.createElement("img");

                            element.src = action.result.fileURL;

                            if (Ext.isIE) {

                                editor.insertAtCursor(element.outerHTML);

                            }

                            else {

                                var selection = editor.win.getSelection();

                                if (!selection.isCollapsed) {

                                    selection.deleteFromDocument();

                                }

                                selection.getRangeAt(0).insertNode(element);

                            }

                            win.removeAll();

                            win.hide();

                        },

                        // 

                        failure: function (form, action) {

                            form.reset();

                            if (action.failureType == Ext.form.Action.SERVER_INVALID) {

                                Ext.MessageBox.alert('警告', action.result.msg);

                            }

                            else {

                                Ext.MessageBox.alert('警告', action.result.msg);

                            }

                        }

                    });

                }

            }]

        });

        // 创建上传的窗体 

        var win = new Ext.Window({

            title: "上传图片",

            width: 500,

            height: 200,

            modal: true,

            border: false,

            layout: "fit",

            items: imgform

        });

        win.show();

    }, // addImage end

    //保存

    addSave: function () {

        // do something 

        alert('保存');

    },

    // 插入 htmleditor 工具栏项 

    createToolbar: function (editor) {

        HTMLEditor.superclass.createToolbar.call(this, editor);

        this.tb.insertButton(16,

                    {

                        cls: "x-btn-icon",

                        icon: "../Images/upload_1.jpg",

                        handler: this.addImage,

                        scope: this

                    });

        this.tb.insertButton(0,

                    {

                        cls: "x-btn-icon",

                        icon: "../Images/upload_2.jpg",

                        handler: this.addSave,

                        scope: this

                    });

    }

});

Ext.reg('htmleditor_upload', HTMLEditor); 

说明：

上面代码创建一个 HTMLEditor 对象，它继承 Ext.form.HtmlEditor。对象中主要有三个方法：addImage，用来创建在本地选择图片的表单及其窗体。另外，在该方法可以看到，调用服务器端处理程序，将客户端图片上传到服务器后，调用回调函数，将图片显示在客户端；addSave，用来保存 htmleditor 的内容；createToolbar，用来向 htmleditor 控件的工具栏添加两个按钮，即 addImage 和 addSave 功能。

 

HtmlEditorUploadImg.ashx 上传图片到服务器

---

HtmlEditorUploadImg.ashx 处理程序用于将客户端选择的图片，上传到服务器端的指定位置。如下所示：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Services;

using Ext.Net;

namespace ExtNetHtmlEditor_Upload.Handle

{

    /// <summary>

    /// $codebehindclassname$ 的摘要说明

    /// </summary>

    [WebService(Namespace = "http://tempuri.org/")]

    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

    public class HtmlEditorUploadImg : IHttpHandler

    {

        HttpRequest httpRequest;

        HttpResponse httpResponse;

        string fileName = string.Empty;

        string fileURL = string.Empty;

        MsgInfo succ = null; // 必须叫 succ

        public void ProcessRequest(HttpContext context)

        {

            httpRequest = context.Request;

            httpResponse = context.Response;

            try

            {

                HttpPostedFile file = httpRequest.Files[0];

                fileName = GetFileName(file.FileName);

                file.SaveAs(System.Web.HttpContext.Current.Server.MapPath("..\\UploadImgs\\") + fileName);

                fileURL = "UploadImgs/" + fileName;

                succ = new MsgInfo(true, fileURL, string.Empty);

            }

            catch

            {

                succ = new MsgInfo(false, fileURL, string.Empty);

            }

            httpResponse.Write(JSON.Serialize(succ));

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

        private string GetFileName(string FullName)

        {

            string fileName = string.Empty;

            int last = FullName.LastIndexOf(@"\");

            fileName = FullName.Substring(last + 1, FullName.Length - last - 1);

            return fileName;

        }

    }

}

处理程序返回给客户端的信息，一序列化后的一个字符串。可以在服务器端先用类 MsgInfo，然后序列化后发给客户端。MsgInfo 类定义如下：

namespace ExtNetHtmlEditor_Upload

{

    public class MsgInfo

    {

        public bool success { get; set; }

        public string fileURL { get; set; }

        public string msg { get; set; }

        public MsgInfo(bool success, string fileURL, string msg)

        {

            this.success = success;

            this.fileURL = fileURL;

            this.msg = msg;

        }

    }

}

说明：

处理程序返回给客户端的字符串必须叫 succ，即 MsgInfo 对象 succ，否则无论服务器端是否执行成功，客户端都调用 failure 回调程序，而不是 success。

 

演示 htmleditor 控件添加插入图片功能

---

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />

    <script src="Js/HtmlEditor_Upload.js" type="text/javascript"></script>

    <script type="text/javascript">

        Ext.onReady(function () {

            Ext.QuickTips.init();

            var myEditor = new Ext.Panel({

                title: "",

                renderTo: 'div1',

                width: 800,

                height: 480,

                labelWidth: 55,

                frame: true,

                layout: 'fit',

                items: [{

                    xtype: "htmleditor_upload",

                    id: 'htmleditor_upload1',

                    name: "content",

                    enableColors: true

                }]

            });

        });

        var save = function () {

            var content = htmleditor_upload1.getValue();

            alert(content);

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <ext:ResourceManager ID="ResourceManager1" runat="server" />

    <div id="div1">

    </div>

    <ext:Button ID="btn_save" runat="server" Text="保存">

        <Listeners>

            <Click Handler="save();" />

        </Listeners>

    </ext:Button>

    </form>

</body>

</html>

运行结果：

图 2 在客户端选择图片

图 3 上传客户端图片到服务器，并在客户端显示

图 4

下载 Demo