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 }