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);     }}});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值