extjs 的htmleditor 实现上传图片

以下是我做之前在网上找的例子,但是后台文件保存那一块不太适合我的系统,我做了下修改,具体的修改已经在文章名为“java中怎样反向显示字符串(很多地方值得借鉴)”一文中一一列出,如果下面的对大家的系统不适用,你可参照我的实例。

 

最近用Extjs做项目,用到htmleditor控件,唯一的缺陷是不可以上传图片,为了以后方便,在基于htmleditor控件上写了一个支持上传图片的。

控件StarHtmleditor

/**
 * 重载EXTJS-HTML编辑器
 * 
 * @class HTMLEditor
 * @extends Ext.form.HtmlEditor
 * @author wuliangbo
 
*/
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,
                        anchor : 
'90%'
                    }],
            buttons : [{
                text : 
'上传',
                type : 
'submit',
                handler : 
function() {
                    
if (!imgform.form.isValid()) {return;}
                    imgform.form.submit({
                        waitMsg : 
'正在上传',
                        url : 
'Default.aspx',
                        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.hide();
                        },
                        failure : 
function(form, action) {
                            form.reset();
                            
if (action.failureType == Ext.form.Action.SERVER_INVALID)
                                Ext.MessageBox.alert(
'警告',
                                        action.result.errors.msg);
                        }
                    });
                }
            }, {
                text : 
'关闭',
                type : 
'submit',
                handler : 
function() {
                    win.close(
this);
                }
            }]
        })

        
var win = new Ext.Window({
                    title : 
"上传图片",
                    width : 
300,
                    height : 
200,
                    modal : 
true,
                    border : 
false,
                    iconCls : 
"picture.png",
                    layout : 
"fit",
                    items : imgform

                });
        win.show();
    },
    createToolbar : 
function(editor) {
        HTMLEditor.superclass.createToolbar.call(
this, editor);
        
this.tb.insertButton(16, {
                    cls : 
"x-btn-icon",
                    icon : 
"picture.png",
                    handler : 
this.addImage,
                    scope : 
this
                });
    }
});
Ext.reg(
'StarHtmleditor', HTMLEditor);

页面js代码

Ext.onReady(function() {
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget 
= 'side';
    
var ff = new Ext.FormPanel({
                title : 
"文件上传",
                renderTo : document.body,
                width : 
600,
                height : 
480,
                labelWidth : 
55,
                frame : 
true,
                items : [{
                            xtype : 
"textfield",
                            name : 
"title",
                            fieldLabel : 
"标题",
                            anchor : 
"98%"
                        }, {
                            xtype : 
"combo",
                            name : 
"topic_id",
                            fieldLabel : 
"所属栏目",
                            anchor : 
"98%"
                        }, {
                            xtype : 
"textfield",
                            name : 
"keywords",
                            fieldLabel : 
"关键字",
                            anchor : 
"98%"
                        }, {
                            xtype : 
"StarHtmleditor",
                            name : 
"content",
                            fieldLabel : 
"内容",
                            anchor : 
"98%"
                        }]
    });

});

后台代码简单实现了一下

protected void Page_Load(object sender, EventArgs e)
        {
            string fileName 
= string.Empty;
            string fileURL 
= string.Empty;
            string rt 
= string.Empty;
            
try
            {
                HttpPostedFile file 
= Request.Files[0];
                fileName 
= GetFileName(file.FileName);
                file.SaveAs(Server.MapPath(
"upload//"+ fileName);
                fileURL 
= "upload/" + fileName;
                rt 
= "{success:'true',fileURL:'" + fileURL + "'}";
            }
            
catch
            {
                rt 
= "{success:'false',fileURL:'" + fileURL + "'}";
            } 
             
            Response.Write(rt);

        }
        
        private string GetFileName(string FullName)
        {
            string fileName 
= string.Empty;
            
int last = FullName.LastIndexOf(@"/");
            fileName 
= FullName.Substring(last + 1, FullName.Length - last - 1);
            
return fileName;
        }

实现效果如下 

 

你可能感兴趣的:(ExtJS,extjs,function,border,action,layout,java)