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 : ''  
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             }

 

转载于:https://www.cnblogs.com/I-will-be-different/p/3313941.html

你可能感兴趣的:(Ext中图片上传预览的问题,困扰了好几天终于解决了,记录下)