Extjs 支持图片上传的Html编辑器（StarHtmleditor）及其bug修正

2009年07月16日 星期四 22:20

StarHtmleditor.js文件源码如下： 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 : '90%'       }],     buttons : [{      text : '上传',      type : 'submit',      handler : function() {       var furl="";       furl=imgform.form.findField('userfile').getValue();       if (furl==""||furl==null) {return;}             imgform.form.submit({            url : 'xxfb.htm?action=addPicInNews&fu='+furl,//网上给的实例是Dotnet写的，没看出来是怎么传的参数，这里直接用&传了，也用过params但是不成功，不知道什么原因        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(); //标准的StarHtmleditor这里是一句win.hiden()但我试了，只能发表一个新闻是只能传一张图，传第二张时候就出错了，改用这两句就可以了        },        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 : "上传图片",       id : 'picwin',       width : 300,       height : 200,       modal : true,       border : false,       iconCls : "public/images/icons/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 : "public/images/icons/picture.png",       handler : this.addImage,       scope : this      }); } }); Ext.reg('starthtmleditor', HTMLEditor);       addPicInNews方法代码如下： 注意编码问题，我一但加上 request.setCharacterEncoding("UTF-8"); response.setContentType("text/json;charset=utf-8"); 就出现乱码 /* * 为新闻公告上传图片 */ public void addPicInNews(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//newspic";    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);      if(fileType.toLowerCase()=="jpg"||fileType.toLowerCase()=="bmp"||fileType.toLowerCase()=="gif"||fileType.toLowerCase()=="png")      {      File uploadedFile = new File(filePath + "//" + fileName);      item.write(uploadedFile);      response.getWriter().write("{success:'true',fileURL:'public/uploadfile/newspic/" + fileName + "'}");     //我上传后的文件存储在public/uploadfile/newspic/文件夹下，当然此处也可以直接把filename替换成uploadFile变量，但是替换之后在Html编辑器里所有的“/”都变成%号了，很奇怪，可能那里的编码问题，但直接写死是可以的。      }'      else{       response.getWriter().write("{errors:'图片格式不正确，仅支持jpg、bmp、gif、png格式的图片!'}");      }    }    //} }