ExtJs上传图片预览功能

最新推荐文章于 2021-06-25 14:02:26 发布

wh51665526

最新推荐文章于 2021-06-25 14:02:26 发布

阅读量366

点赞数

文章标签： EXT Microsoft F#

本文链接：https://blog.csdn.net/wh51665526/article/details/83950334

版权


{
                    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); 
    }
}


});