主要思路:
这里主要针对本地图片上传,其他文件上传同理,只是config配置信息中permitted_extensions限制的上传类型不同罢了
1. 在Ext.ux.plugins中注册自定义组件Upload,在组件init时,往htmleditor工具栏添加一个图片上传的菜单,然后再菜单上绑定mousedown事件处理方法imageInsert(),该方法内部实际是调用了Ext.ux.UploadDialog.Dialog,把config信息配置到Ext.ux.UploadDialog.Dialog中,以实现图片上传功能
2. 在引用时,在htmleditor的plugins中配置自定义组件Upload并配置config信息即可
customer.js
Ext.namespace('Ext.ux','Ext.ux.plugins'); Ext.ux.plugins.Upload=function(config){ config=config||{}; Ext.apply(this,config); this.init=function(htmlEditor) { this.editor=htmlEditor; this.editor.on('render',onRender,this); }; this.imageInsert=function() { var dialog = new Ext.ux.UploadDialog.Dialog({ title:config.title || '图片上传', url: config.url || '', post_var_name: config.post_var_name || '', reset_on_hide: config.reset_on_hide || false, modal: config.modal || true, permitted_extensions: config.permitted_extensions || ['JPG','jpg','JPEG','jpeg','GIF','gif','PNG','png'], allow_close_on_upload: config.allow_close_on_upload || false, upload_autostart: config.upload_autostart || true //是否自动上传 }); dialog.show(); //上传成功后回调函数 dialog.on('uploadsuccess',function(dialog, filename, resp_data, record){ config.uploadCallback || '' }); } function onRender(){ if( ! Ext.isSafari){ this.editor.tb.add({ itemId : 'htmlEditorImage', cls : 'x-btn-icon x-edit-insertimage', enableToggle : false, scope : this, handler : function(){ this.imageInsert(); }, clickEvent : 'mousedown', tooltip : config.buttonTip || { title : '插入图片', text : '插入图片到编辑器', cls : 'x-html-editor-tip' }, tabIndex :- 1 }); } } }
页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="extjs2.3/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs2.3/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="extjs2.3/ext-all.js"></script> <script type="text/javascript" src="extjs2.3/ux/upload/js/Ext.ux.UploadDialog.js" ></script> <script type="text/javascript" src="extjs2.3/ux/upload/js/Ext.ux.UploadDialog.packed.js"></script> <link rel="stylesheet" type="text/css" href="extjs2.3/ux/upload/css/Ext.ux.UploadDialog.css"/> <script type="text/javascript" src="customer.js" ></script> <script type="text/javascript"> Ext.onReady(function(){ Ext.QuickTips.init(); new Ext.FormPanel({ renderTo: 'form', defaultType: 'textfield', items: [{ xtype:'htmleditor', width: 650, height: 350, plugins: new Ext.ux.plugins.Upload({ title:'本地图片上传', url: 'shop/link/link_edit!uploadImage.action', post_var_name:'imageUpload', reset_on_hide: false, modal: true, permitted_extensions:['JPG','jpg','JPEG','jpeg','GIF','gif','PNG','png'], allow_close_on_upload: true, upload_autostart: true //是否自动上传 }) } ] }); }); </script> </head> <body> <div id="form"></div> </body> </html>