zoukankan      html  css  js  c++  java
  • 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]

  • 相关阅读:
    平面划分问题
    First Missing Positive
    Redis.conf
    Redis内存存储结构分析
    IE9崩溃解决办法
    未能正确加载包"visla Studio HTM Editor Package"(GUID={1B437B20F8FE11D2A5AE00104BCC7269})
    SQL SERVER 数据类型详解
    创建TIff虚拟打印机
    VS2010出现错误the operation could not be completed
    C# 基础知识 20101118
  • 原文地址:https://www.cnblogs.com/hannover/p/1847317.html
Copyright © 2011-2022 走看看