Extjs allows you to preview uploaded images.

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. contril_id indicates the ID of the upload control. You only need to preview and register this method in the program. 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 www.2cto.com
}
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;
}
}

 

From KimhillZhang