Extjs 图片上传预览功能

//上传图片类型  

var img_reg = /\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([gG][iI][fF]){1}$|\.([pP][nN][gG]){1}$|\.([bB][mM][pP]){1}$/;  
  
var win_uploadImage = new Ext.Window({  
    layout:'fit',  
    width:380,  
    closeAction:'hide',  
    height:380,  
    resizable:false,  
    shadow:false,  
    modal:true,  
    closable:true,  
    bodyStyle:'padding: 5 5 5 5',  
    animCollapse:true,  
    imageIndexName:'',  
    items:[{  
        xtype:'form',  
        id:'image-upload-form',  
        frame:true,  
        border:false,  
        isAdd:false,  
        enctype: 'multipart/form-data',  
        fileUpload : true,  
        layout : 'form',  
        items:[{  
           id : 'file-idx',  
           name : 'file',  
           inputType : "file",  
           fieldLabel : '上传图片',  
           xtype : 'textfield',  
           blankText:'上传图片不能为空',  
           anchor : '100%'   
        },{  
           xtype : 'box',     
           id : 'browseImage',  
           fieldLabel : "预览图片",     
           autoEl : {  
               width : 300,  
               height : 300,  
               tag : 'img',  
                // type : 'image',  
               src : Ext.BLANK_IMAGE_URL,  
               style : 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);',     
               complete : 'off',     
               id : 'imageBrowse'  
           }  
        }  
        ],  
        listeners : {     
            'render' : function(f) {  
                //  
                this.form.findField('file-idx').on('render', function() {  
                    //通過change事件,图片也动态跟踪选择的图片变化  
                    Ext.get('file-idx').on('change',  
                        function(field, newValue, oldValue) {  
                        //得到选择的图片路径  
                        var url = 'file://'+ Ext.get('file-idx').dom.value;  
                        //alert("url = " + url);     
                        //是否是规定的图片类型  
                        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('file-idx').dom.files.item(0).getAsDataURL();  
                            }  
                        }  
                    }, this);     
                }, this);     
            }     
        },   
        buttons:[{  
           text:'关闭',  
           handler:function(){  
                win_uploadImage.hide();  
           }  
           },{  
                text:'上传',  
                handler:function() {  
                    var furl="";  
                    furl = Ext.getCmp('image-upload-form').form.findField('file').getValue();  
                    var type = furl.substring(furl.length - 3).toLowerCase();  
                    if (furl == "" || furl == null) {  
                        return;  
                    }  
                    if (type != 'jpg' && type != 'bmp' && type != 'gif' && type != 'png') {  
                        alert('仅支持jpg、bmp、gif、png格式的图片');  
                        return;  
                    }  
                 
                   Ext.getCmp('image-upload-form').form.submit({  
                        clienValidation:true,  
                        waitMsg:'正在上传请稍候',  
                        waitTitle:'提示',  
                        url:'upload.do',  
                        method:'POST',  
                        success:function(form,action){  
                            var picName = action.result.data;  
                            if(win_uploadImage.imageIndexName!=''){  
                                Ext.getCmp(win_uploadImage.imageIndexName).setValue(picName);  
                            }  
                            //reset form  
                            Ext.getCmp('image-upload-form').form.el.dom.reset();  
                            if (Ext.isIE) {  
                                var i_image = Ext.get('imageBrowse').dom;  
                                i_image.src = Ext.BLANK_IMAGE_URL;  
                                i_image.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = Ext.BLANK_IMAGE_URL;  
                            }else{  
                                Ext.get('imageBrowse').dom.src = Ext.BLANK_IMAGE_URL;  
                            }  
                              
                            win_uploadImage.hide();  
                        },  
                        failure:function(form,action){  
                            Ext.MessageBox.show({title: '失败',msg: '上传失败!',buttons: Ext.MessageBox.OK,icon: Ext.MessageBox.ERROR});  
                        }  
                   })  
                }  
           }  
       ]  
}]  
});  

核心代码是

if(img_reg.test(url)){ 
    if(Ext.isIE) { 
      var image = Ext.get('imageBrowse').dom;
     //image.src = Ext.BLANK_IMAGE_URL;//覆盖原来的图片 image.src = url;
     //直接改成赋值后的url就可以了，而且必须放在下面那句代码之前     
     image.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = url; 
     } //支持FF
     else {
       Ext.get('imageBrowse').dom.src =Ext.get('imageupload').dom.files.item(0).getAsDataURL() 
     }
 }