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格式的图片!'}");
     }
   }
   //}
}

你可能感兴趣的:(html,function,String,File,ExtJs,border)