Extjs是现在比较流行的一种js框架,它的功能很强大,但是也有一些缺陷。例如:Ext中的HTMLEditor就没有文件上传或者图片上传的功能。这些功能的实现需要我们来扩展Extjs的HTMLEditor控件。下面就是图片上传的一个例子:
扩展HTMLEditor控件的js文件:
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',
border : false,
items : [
{
xtype : 'textfield',
fieldLabel : '选择文件',
name : 'userfile',
inputType : 'file',
allowBlank : false,
blankText : '文件不能为空',
height : 25,
anchor : '90%'
}],
buttons : [{
text : '上传',
type : 'submit',
handler: insertimag
}, {
text : '关闭',
type : 'submit',
handler: function(){
win.hide();
}
}]
})
var win = new Ext.Window({
title : "上传图片",
width : 300,
height : 200,
border : false,
iconCls : 'insertpict',
plain:true,
layout : "fit",
items: imgform
});
win.show();
editor.deferFocus();
//添加图片
function insertimag(){
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'){
Ext.Msg.alert('提示','仅支持jpg、bmp、gif、png格式的图片');
return;
}
//=============================================
var msgTipe = Ext.MessageBox.show({
title:'提示',
width: 250,
msg:'正在保存请稍侯.......'
});
Ext.Ajax.request({
url:'../questionAction.do?method=uploadimg',
params: {
furl: furl
},
method: 'POST',
success: function(response,options){
msgTipe.hide();
var str = response.responseText;
if(str.trim()!='null'){
Ext.Msg.alert('上传','上传成功!');
var element = document.createElement("img");
element.src = str.trim();
if(Ext.isIE) {
editor.win.focus();
var r = editor.doc.selection.createRange();
if(r){
r.collapse(true);
r.pasteHTML(element.outerHTML);
editor.syncValue();
editor.deferFocus();
}
// editor.insertAtCursor(element.outerHTML);
}
else{
var selection = editor.win.getSelection();
if (!selection.isCollapsed) {
selection.deleteFromDocument();
}
selection.getRangeAt(0).insertNode(element);
}
imgform.form.reset();
win.hide();
}else{
Ext.Msg.alert('警告','上传失败!');
return;
}
},
failure: function(){
msgTipe.hide();
Ext.Msg.alert('提示','上传信息请求失败!');
}
});
}
},
createToolbar : function(editor) {
HTMLEditor.superclass.createToolbar.call(this, editor);
this.tb.insertButton(16, {
itemId: 'image',
iconCls: 'insertpict',
handler: this.addImage,
scope: this,
clickEvent: 'mousedown',
tooltip: {
title: 'insert img',
text: '插入图片到编辑器',
cls: 'x-html-editor-tip'
}
});
}
});
Ext.reg('StarHtmleditor', HTMLEditor);
下面是应用扩展的HTMLEditor
var form = new Ext.form.FormPanel({
title:'',
labelWidth: 79,
labelSeparator: ':',
buttonAlign:'center',
width: 700,
autoHeight: true,
frame: true,
defaulst:{
bodyStyle: 'background-color:#FFFFFF'
},
items:[
{
xtype : "StarHtmleditor",
name : "content",
id:'askcontent',
fieldLabel : "问题内容",
allowBlank: false,
blankText:'问题内容不能为空!',
anchor : "58%",
height: 500,
enableAlignments: true,
enableFont: true,
enableColors: false,
enableFontSize:true,
enableFormat: true,
enableLists: true,
enableSourceEdit: false,
fontFamilies:['宋体','隶书','黑体',"Arial","Arial Narrow","System","Tims New Roman","Verdana"],
buttonTips:{
bold:{
title: 'Bold (Ctrl+B)',
cls: 'x-html-editor-tip',
text:'粗体'
},
italic: {
title:'Italic (Ctr+I)',
cls: 'x-html-editor-tip',
text:'斜体'
},
underline:{
title:'Underline (Ctrl+U)',
cls: 'x-html-editor-tip',
text:'下划线'
},
increasefontsize:{
title:'Grow Text',
cls: 'x-html-editor-tip',
text: '增大字体'
},
decreasefontsize:{
title:'Shrink Text',
cls: 'x-html-editor-tip',
text:'缩小字体'
},
backcolor:{
title:'Text Highlight Color',
cls: 'x-html-editor-tip',
text:'背景色'
},
forecolor:{
title:'Font Color',
cls: 'x-html-editor-tip',
text:'前景色'
},
justifyleft:{
title:'Align Text Left',
cls: 'x-html-editor-tip',
text:'左对齐'
},
justifycenter:{
title:'Center Text',
cls: 'x-html-editor-tip',
text:'中间对齐'
},
justifyright:{
title:'Align Text Right',
cls: 'x-html-editor-tip',
text:'右对齐'
},
insertunorderedlist:{
title:'Bullet List',
cls: 'x-html-editor-tip',
text:'项目符号'
},
insertorderedlist:{
title:'Numbered List',
cls: 'x-html-editor-tip',
text:'数字编号'
},
sourceedit:{
title:'Source Edit',
cls: 'x-html-editor-tip',
text:'切换源代码编辑模式'
}
}
}
] });
下面是acion中上传图片的实现,获取客户端图片的路径上传到工程中的upload文件夹中
// 上传图片
public ActionForward uploadPic(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) throws Exception{
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
try {
SmartUpload mySmartUpload = new SmartUpload();
mySmartUpload.initialize(this.getServlet().getServletConfig(), request, response);
mySmartUpload.upload();
String separator = System.getProperty("file.separator"); // 系统路径分隔符
String dir = mySmartUpload.getRequest().getRealPath("/") + separator; // 绝对地址目录
for (int i = 0; i < mySmartUpload.getFiles().getCount(); i++) {
com.jspsmart.upload.File myFile = mySmartUpload.getFiles().getFile(i);
if (!myFile.isMissing()) {
String name = myFile.getFileName();
String suffix = name.substring(name.lastIndexOf(".")); // 后缀名
name = QUtil.getTimeStr2() + suffix;// 给即将保存在服务器的文件赋予新的文件名
String fileName = dir + "upload" + separator + name; // 存储在服务器上的文件名(包括路径)
myFile.saveAs(fileName, mySmartUpload.SAVE_PHYSICAL);
// 获取图片的高度和宽度
BufferedImage img = ImageIO.read(new File(fileName));
int width = img.getWidth();
int height = img.getHeight();
if(width > 600){
height = ((Double)(height*600.0/width)).intValue();
width = 600;
}
String str = "{'success':true,'pic':'upload/"+name+"','width':'"+width+"','height':'"+height+"'}";
response.getWriter().print(str);
}
}
} catch (Exception ex) {
ex.printStackTrace();
response.getWriter().print("{success:false}");
}
return null;
}