EXTjs 同时支持文件上传和图片上传的htmleditor

截图:

参照StarHtmleditor的源代码,自己又添加了文件上传功能。源代码如下:

Szj_StarHtmleditor.js文件源码:

[code]
var 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',
       id : 'userfile',
       inputType : 'file',
       allowBlank : false,
       blankText : '文件不能为空',
       height : 25,
       anchor : '98%'
      }],
    buttons : [{
     text : '上传',
     type : 'submit',
     handler : function() {
      var furl="";
      furl=imgform.form.findField('userfile').getValue();
      var type=furl.substring(furl.length-3).toLowerCase();
      if (furl==""||furl==null) {return;}
      if(type!='jpg'&&type!='bmp'&&type!='gif'&&type!='png'){
       alert('仅支持jpg、bmp、gif、png格式的图片');
       return;
      }
      imgform.form.submit({
       url : 'xxfb.htm?action=addFileInNews&fu='+furl,
       waitMsg : '正在上传......',
       waitTitle : '请等待',
       method : 'POST',
       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);
        }
        form.reset();
        win.close();
       },
       failure : function(form, action) {
        form.reset();
        if (action.failureType == Ext.form.Action.SERVER_INVALID)
         Ext.MessageBox.alert('警告',
           '上传失败,仅支持jpg、bmp、gif、png格式的图片');
       
       }
      
      });
     }
    }, {
     text : '关闭',
     type : 'submit',
     handler : function() {
      win.close(this);
     }
    }]
   })

   var win = new Ext.Window({
      title : "上传图片",
      id : 'picwin',
      width : 400,
      height : 150,
      modal : true,
      border : false,
     
      layout : "fit",
      items : imgform

     });
   win.show();
  
},
addFile : function() {
   var editor = this;
   var fileform = 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',
       id : 'userfile',
       inputType : 'file',
       allowBlank : false,
       blankText : '文件不能为空',
       height : 25,
       anchor : '98%'
      }],
    buttons : [{
     text : '上传',
     type : 'submit',
     handler : function() {
      var furl="";//文件物理地址
      var fname="";//文件名称
      furl=fileform.form.findField('userfile').getValue();
      var type=furl.substring(furl.length-3).toLowerCase();
      if (furl==""||furl==null) {return;}
      if(type!='doc'&&type!='xls'){
       alert('仅支持上传doc、xls格式的文件!');
       return;
      }
      fname=furl.substring(furl.lastIndexOf("http://www.cnblogs.com/hannover/admin/file://")+1/);
      fileform.form.submit({
       url : 'xxfb.htm?action=addFileInNews&fu='+furl,
       waitMsg : '正在上传......',
       waitTitle : '请等待',
       method : 'POST',
       success : function(form, action) {
        var element = document.createElement("a");
        element.href = action.result.fileURL;
        element.target = '_blank';
        element.innerHTML = fname;
        if (Ext.isIE) {
         editor.insertAtCursor(element.outerHTML);
        } else {
         var selection = editor.win.getSelection();
         if (!selection.isCollapsed) {
          selection.deleteFromDocument();
         }
         selection.getRangeAt(0).insertNode(element);
        }
        form.reset();
        winFile.close();
       },
       failure : function(form, action) {
        form.reset();
        if (action.failureType == Ext.form.Action.SERVER_INVALID)
         Ext.MessageBox.alert('警告',
           '上传失败,仅支持上传doc、xls格式的文件!');
       
       }
      
      });
     }
    }, {
     text : '关闭',
     type : 'submit',
     handler : function() {
      winFile.close(this);
     }
    }]
   })

   var winFile = new Ext.Window({
      title : "上传附件",
      id : 'picwin',
      width : 400,
      height : 150,
      modal : true,
      border : false,
     
      layout : "fit",
      items : fileform

     });
   winFile.show();
  
},
createToolbar : function(editor) {
   HTMLEditor.superclass.createToolbar.call(this, editor);
   this.tb.insertButton(16, {
      cls : "x-btn-icon",
      icon : "public/images/icons/picture.png",
      handler : this.addImage,
      scope : this
     });
   this.tb.insertButton(17, {
      cls : "x-btn-icon",
      icon : "public/images/icons/doc.png",
      handler : this.addFile,
      scope : this
     });
}
});
Ext.reg('starthtmleditor', HTMLEditor);
[/code]

上传方法公用一个方法addFileInNews,只是在前天页面判断上传文件的类型。

addFileInNews:
      [code]/*
* 为新闻公告上传图片和附件
*/
public void addFileInNews(HttpServletRequest request,
    HttpServletResponse response) throws Exception {
   log.info("reach XxfbbController Pictures");
   log.info("Add new Xinxi Pictures");
   log.info(json);
   String fileurl = (String) request.getParameter("fu");
  
   boolean isMultipart = ServletFileUpload.isMultipartContent(request);

   FileItemFactory factory = new DiskFileItemFactory();
   ServletFileUpload upload = new ServletFileUpload(factory);
  
   String absPath = request.getRealPath("\\");
   String filePath = absPath + "public\\uploadfile\\newsFuJian";
   File dir = new File(filePath);
   if (!dir.exists()) {
    dir.mkdir();
   }
   List items = upload.parseRequest(request);
   //Iterator iter = items.iterator();
   //while (iter.hasNext()) {
   FileItem item = (FileItem) items.get(0);
   if (item.isFormField()) {
   
   }
   else
   {
     String fieldName = item.getFieldName();
     String fileName = new File(item.getName()).getName();
     String fileType=fileName.substring(fileName.length()-3);
     //String fn=new Date().toString()+"."+fileType;
     File uploadedFile = new File(filePath + "\\" + fileName);
     item.write(uploadedFile);
     response.getWriter().write("{success:'true',fileURL:'public/uploadfile/newsFuJian/" + fileName + "'}");
   }
  
   //}
}[/code]

原文地址:https://www.cnblogs.com/hannover/p/1847317.html