htmleditor 如何上传图片

发布网友 发布时间：2022-04-30 01:18

我来回答

共1个回答

热心网友 时间：2022-06-27 21:30

最近用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;
       }

实现效果如下

http://blog.csdn.net/zhaozhen1984/article/details/5911839

原文链接请查看谢谢。

http://www.cnblogs.com/wuliangbo/archive/2009/03/08/1406460.html

详查链接。谢谢。