Ext中图片上传预览的问题,困扰了好几天终于解决了,记录下

 1 {

 2                 columnWidth:.50,

 3                 xtype:'textfield',

 4                 style:"padding-top:5px",

 5                 name:'goodsMainPhoto',

 6                 id:'goodsMainPhoto',

 7                 inputType:'file',

 8                 //labelAlign:'center'//fieldlabel的排列位置,默认为"left",其他两个枚举值是"center","right" 

 9                 listeners : {

10                      'render':function(){

11                           var logoFileCmp = Ext.get('goodsMainPhoto');

12                           logoFileCmp.on('change',function(){

13 //                               var picPath = logoFileCmp.getValue();

14 //                               var url = 'file://c:\\' + picPath;

15 //                               alert(url);

16 //                               if(Ext.isIE){

17 //                                 var image = Ext.get('logoPic').dom; 

18 //                                 image.src = Ext.BLANK_IMAGE_URL;

19 //                                 image.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = url;

20 //                               }else{

21 //                                 //支持FF

22 //                                 Ext.get('logoPic').dom.src =Ext.get('goodsMainPhoto').dom.files.item(0).getAsDataURL();

23 //                               }

24                           //firefox7+以后版本,file控件已经不支持getAsDataURL,如果调用file.files.item(0).getAsDataURL()方法会

25                           //出现file.files.item(0).getAsDataURL is not a function错误。firefox6-一下的浏览器还是继续支持getAsDataURL方法。所以用如下方法

26                                   var oFReader = new FileReader();

27                                    oFReader.readAsDataURL(document.getElementById("goodsMainPhoto").files[0]);

28                                 oFReader.onload = function (oFREvent) {

29                                     document.getElementById("logoPic").src = oFREvent.target.result;

30                                 };

31                              });

32                          }

33                     }

34             },{   

35 //                style:"padding-left:50px",

36 //                xtype : 'label',   

37 //                html : '<img id="im" src="txjyw/image/defaultPhoto.jpg" height=80 width=80/>'  

38                 xtype : 'box',

39                 id : 'logoPic',

40                 width : 80,

41                 height : 80,

42                 autoEl : {

43                     tag : 'img',

44                     src : "txjyw/image/defaultPhoto.jpg"

45                     //style : 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);'

46                 }

47             }

 

你可能感兴趣的:(图片上传)