老生常談--file upload前的image preview

以前是做過了,可是沒抄錄下才,現在又再找一次,正真是「碼到用時方恨少」
===========================================
           ...
           ....
           ....
                {
                            xtype: 'filefield',
                            anchor: '100%',
                            //colspan: 3,
                            width: 298,
                            name: 'image',
                            readOnly:true,
                            listeners: {
                                change: {
                                    fn: me.onFilefieldChange,
                                    scope: me
                                }
                            }
                        }
......
....
....
    onFilefieldChange: function (filefield, value, eOpts) {
        var me = this;
        var file = filefield.fileInputEl.dom.files[0];
            var reader = new FileReader();
            reader.onload = function (e) {
                me.setPanelImg(e.target.result);
            }
            reader.readAsDataURL(file);
    },
    setPanelImg: function (imgUrl) {
      var me=this;
        var pnlContainImgPnl =me.down('#pnlContainImage');
        pnlContainImgPnl.removeAll();
        var pnl4Img = Ext.create('Ext.panel.Panel',
            {
                autoScroll: true,
                html: '<img src="'+imgUrl+'"/>',
            });
        pnlContainImgPnl.add(pnl4Img);
        pnlContainImgPnl.updateLayout();
    }
===========================================
就將啦