当前位置: 首页 > news >正文

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]

相关文章:

  • ITIL管理系列之文档管理
  • dos cmd xp 有用的命令
  • B3log Solo 0.1.0 发布了!
  • 用户界面设计和用户体验设计的区别
  • 如何调试MFC中的内存泄漏
  • 80后的你如果懂得这些,那么你就长大了!
  • 网站流行色
  • 编码相关
  • 煤矿监控
  • 篮球飞人火爆版
  • 在域控上如何批量的增加用户
  • 2010年10月blog汇总:敏捷练习和建模
  • java 的万年历代码
  • Memcache基础教程
  • 将Java对象持久化到XML文件中
  • 【comparator, comparable】小总结
  • CODING 缺陷管理功能正式开始公测
  • CSS实用技巧干货
  • Hibernate【inverse和cascade属性】知识要点
  • laravel with 查询列表限制条数
  • oldjun 检测网站的经验
  • Sass Day-01
  • Spring技术内幕笔记(2):Spring MVC 与 Web
  • 批量截取pdf文件
  • 【运维趟坑回忆录】vpc迁移 - 吃螃蟹之路
  • ​LeetCode解法汇总1410. HTML 实体解析器
  • #微信小程序:微信小程序常见的配置传值
  • (12)目标检测_SSD基于pytorch搭建代码
  • (C++)八皇后问题
  • (力扣题库)跳跃游戏II(c++)
  • (十) 初识 Docker file
  • (转)视频码率,帧率和分辨率的联系与区别
  • .NET delegate 委托 、 Event 事件,接口回调
  • .NET 的静态构造函数是否线程安全?答案是肯定的!
  • .NET 中各种混淆(Obfuscation)的含义、原理、实际效果和不同级别的差异(使用 SmartAssembly)
  • /etc/motd and /etc/issue
  • @param注解什么意思_9000字,通俗易懂的讲解下Java注解
  • @Resource和@Autowired的区别
  • [ C++ ] STL_vector -- 迭代器失效问题
  • [ IO.File ] FileSystemWatcher
  • [] 与 [[]], -gt 与 > 的比较
  • []常用AT命令解释()
  • [20180312]进程管理其中的SQL Server进程占用内存远远大于SQL server内部统计出来的内存...
  • [ACM] hdu 1201 18岁生日
  • [Assignment] C++1
  • [EFI]DELL XPS13 9360电脑 Hackintosh 黑苹果efi引导文件
  • [EMWIN]FRAMEWIN 与 WINDOW 的使用注意
  • [Gamma]阶段测试报告
  • [HackMyVM]靶场 VivifyTech
  • [hdu 2826] The troubles of lmy [简单计算几何 - 相似]
  • [js]- 两个对象的合并(Object.assign)
  • [Kubernetes]9. K8s ingress讲解借助ingress配置http,https访问k8s集群应用
  • [LeetCode] Wildcard Matching
  • [LeetCode][LCR178]训练计划 VI——使用位运算寻找数组中不同的数字
  • [leetcode]Clone Graph