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

最新推荐文章于 2018-10-24 16:27:03 发布

weixin_30532837

最新推荐文章于 2018-10-24 16:27:03 发布

阅读量106

点赞数

原文链接：http://www.cnblogs.com/I-will-be-different/p/3313941.html

版权

本文详细介绍了如何在Web应用中实现文件上传，并通过JavaScript和相关库进行实时预览，包括IE和Firefox等浏览器的兼容性处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 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             }