ExtJs上传图片预览功能

   

{                    columnwidth: .9,                    layout: 'form',                    border: false,                    items : [{                            inputtype : "file",                            fieldlabel: '上传图片',                            name: 'imageupload',                            id:'imageupload',                                                       xtype: 'textfield',                            anchor: '40%'                                                     }]                               },                   {                    columnwidth: .5,                    layout: 'form',                    border: false,                    items : [                            {                                 xtype: 'box',                                id : 'browseimage',                                fieldlabel : "预览图片",                                autoel : {                                    width : 100,                                    height : 150,                                    tag : 'img',                                    //type : 'image',                                    src : ext.blank_image_url,                                    style : 'filter:progid:dximagetransform.microsoft.alphaimageloader(sizingmethod=scale);',                                    complete:'off',                                    id : 'imagebrowse'                                    }                            }                                                         ]                                          }

这是构造上传的file的代码，网上看到很多autocreate代替autoel，不过查了下最新的3.2版本的api没发现这个，component只有autoel配置项。


下面是处理预览的代码

//上传图片类型var img_reg = /\.([jj][pp][gg]){1}$|\.([jj][pp][ee][gg]){1}$|\.([gg][ii][ff]){1}$|\.([pp][nn][gg]){1}$|\.([bb][mm][pp]){1}$/ext.extend(simpleform,ext.form.formpanel,{listeners:{    'render':function(f)    {        this.form.findfield('imageupload').on('render',function()         {               ext.get('imageupload').on('change',function(field,newvalue,oldvalue )             {                                                 var url = 'file:///'+ext.get('imageupload').dom.value;                                                     if(img_reg.test(url))                {                                                                      if(ext.isie)                                 {                                      var image = ext.get('imagebrowse').dom;                                       image.src = ext.blank_image_url;//覆盖原来的图片                                       image.filters.item("dximagetransform.microsoft.alphaimageloader").src=url;                                                                             }//支持ff                                 else                                 {                                      ext.get('imagebrowse').dom.src =ext.get('imageupload').dom.files.item(0).getasdataurl()                                 }                   }             },this);           },this);     }}});

 

评论

1 楼 野狐禅 2011-12-25  

ext.get('imagebrowse') is null