Extjs supports both file upload and Image Upload htmleditor

:

Refer to starhtmleditor'sSource codeAnd added the file upload function. SourceCodeAs follows:

Source code of the szj_starhtmleditor.js file:

[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: 'select file ',
Name: 'userfile ',
ID: 'userfile ',
Inputtype: 'file ',
Allowblank: false,
Blanktext: 'file cannot be blank ',
Height: 25,
Anchor: '000000'
}],
Buttons :[{
Text: 'upload ',
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 ('only images in JPG, BMP, GIF, and PNG formats are supported ');
Return;
}
Imgform. Form. Submit ({
URL: 'xxfb.htm? Action = addfileinnews & Fu = '+ furl,
Waitmsg: 'uploading ......',
Waittitle: 'Please wait ',
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 ('Warning ',
'Upload failed. Only JPG, BMP, GIF, and PNG formats are supported ');

}

});
}
},{
Text: 'close ',
Type: 'submit ',
Handler: function (){
Win. Close (this );
}
}]
})

VaR win = new Ext. Window ({
Title: "uploading images ",
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: 'select file ',
Name: 'userfile ',
ID: 'userfile ',
Inputtype: 'file ',
Allowblank: false,
Blanktext: 'file cannot be blank ',
Height: 25,
Anchor: '000000'
}],
Buttons :[{
Text: 'upload ',
Type: 'submit ',
Handler: function (){
VaR furl = ""; // physical file address
VaR fname = ""; // file name
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 ('only files in Doc and XLS formats are supported! ');
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: 'uploading ......',
Waittitle: 'Please wait ',
Method: 'post ',
Success: function (Form, Action ){
VaR element = Document. createelement ("");
Element. href = action. Result. fileurl;
Element.tar get = '_ 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 ('Warning ',
'Upload failed. Only files in Doc and XLS formats are supported! ');

}

});
}
},{
Text: 'close ',
Type: 'submit ',
Handler: function (){
Winfile. Close (this );
}
}]
})

var winfile = new Ext. window ({
title: "uploading attachments",
ID: 'picwin',
width: 400,
Height: 150,
modal: True,
border: false,
layout: "fit",
items: fileform

});
Winfile. Show ();

},
Createmedilbar: function (editor ){
Htmleditor. superclass. createmedilbar. 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]

The upload method uses addfileinnews to determine the type of the file to be uploaded on the page of the day before yesterday.

Addfileinnews:
[Code]/*
* Upload images and attachments for news announcements
*/
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]