I have found a lot of extjs files on the Internet to upload and preview images, but they do not work. Although IE8 can be used, there must be compatibility issues with other browsers. I have to wait for a while ..
{
Width: 450,
Fileupload: True,
Fieldlabel: 'select image ',
Items :[{
Xtype: 'textfield ',
ID: 'up _ forth ',
Name: 'Up _ forth ',
Inputtype: 'file ',
Width: 300
}]
}
Preview box
{
Columnwidth:. 18,
Bodystyle: 'margin: 4px 10px 10px 5px ',
Layout: 'form ',
Items :[{
Xtype: 'box ',
Autoel :{
Width: 150, width: 150,
Tag: 'div ',
ID: 'browser _ Up_forth'
}
}]
}
Myfrom indicates the formpanel outside the upload control, and contril_id indicates the ID of the upload control, as longProgramYou can preview and register this method on, Preview (myfrom, 'Up _ forth ');
VaR Preview = function (myform, control_id ){
VaR img_reg = /\. ([JJ] [PP] [Gg]) {1 }$ | \. ([JJ] [PP] [EE] [Gg]) {1 }$ | \. ([Gg] [II] [ff]) {1 }$ | \. ([PP] [NN] [Gg]) {1 }$ | \. ([BB] [mm] [PP]) {1} $/
Myform. On ('render', function (f ){
Myform. Form. findfield (control_id). On ('render', function (){
Ext. Get (control_id). On ('change', function (field, newvalue, oldvalue ){
VaR OBJ = ext. Get (control_id). Dom;
VaR url = getfullpath (OBJ );
If (img_reg.test (URL )){
VaR newpreview = ext. Get ('browser _ '+ control_id). Dom;
VaR showpic = ext. Get ("showpic _" + control_id );
If (showpic! = NULL ){
Showpic. Remove (); // Delete the original image
}
VaR imgdiv = Document. createelement ("Div ");
Imgdiv. ID = "showpic _" + control_id;
Document. Body. appendchild (imgdiv );
Imgdiv. style. width = "150px ";
Imgdiv. style. Height = "150px ";
Imgdiv. style. Filter = "progid: DXImageTransform. Microsoft. alphaimageloader (sizingmethod = scale )";
Imgdiv. Filters. Item ("DXImageTransform. Microsoft. alphaimageloader"). src = URL;
Newpreview. appendchild (imgdiv );
}
}, This );
}, This );
}, This );
}
// Obtain the image address
Function getfullpath (OBJ ){
If (OBJ ){
// IE
If (window. Navigator. useragent. indexof ("MSIE")> = 1 ){
OBJ. Select ();
Return document. selection. createRange (). text;
}
// Firefox
Else if (window. Navigator. useragent. indexof ("Firefox")> = 1 ){
If (obj. Files ){
Return obj. Files. Item (0). getasdataurl ();
}
Return obj. value;
}
Return obj. value;
}
}