ExtJS upload Picture Preview and resolve cannot preview

When you upload a picture, you usually need to preview it. The behavior of this preview is usually to preview the client's local resources. Let's talk about how to achieve the image upload Preview in ext.

First, create a control for the preview picture:

The code is as follows	Copy Code
Xtype: ' Box ', ID: ' Logopic ', width:150, HEIGHT:200, Autoel: { Tag: ' img ', Src:currentlogopath, Style: ' Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (Sizingmethod=scale); ' }

Then create a picture to upload the control:

The code is as follows

Copy Code

Xtype: ' TextField ', ID: ' Logofile ', Name: ' Logofile ', InputType: ' File ', Fieldlabel: '    logo documents ', width:280, Listeners: { ' Render ': function () { var logofilecmp = ext.get (' Logofile '); Logofilecmp.on (' Change ', function (field,newvalue,oldvalue) { var Picpath = Logofilecmp.getvalue (); var url = ' file:///' + picpath; if (Ext.isie) { var image = Ext.get (' Logopic '). Dom; IMAGE.SRC = Ext.blank_image_url; Image.filters.item ("DXImageTransform.Microsoft.AlphaImageLoader"). src = URL; }else{ Support FF Ext.get (' Logopic '). Dom.src =ext.get (' Logofile '). Dom.files.item (0). Getasdataurl (); } },this); } }

Adds a change event to the file upload control. Note that you must use the Ext.get method to get the control here, otherwise the Change event will not work. When a picture is uploaded, the value of the control changes, and then the value of the SRC of the preview control is modified to achieve a preview of the picture.

ExtJS Resolution upload picture preview

Online find a lot of ExtJS upload picture preview, but not,,, although the following IE8 can but certainly there are other browser compatibility issues, to be put to deal with it.

The code is as follows	Copy Code
{ WIDTH:450, Fileupload:true, Fieldlabel: ' Choose Pictures ', 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, height:150, Tag: ' Div ', ID: ' Browser_up_forth ' } }] }

Myfrom represents the Formpanel on the outer edge of the upload control, contril_id represents the ID of the upload control, as long as the procedure is previewed to register the method, preview (Myfrom, ' Up_forth ');

The code is as follows

Copy Code

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 original picture } 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); } Get Picture 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; } }

This solves the problem that the ExtJS upload picture cannot be previewed correctly.