ExtJS图片上传预览

来源：互联网发布：linux 按文件名查找编辑：程序博客网时间：2024/05/18 11:25
本文由群成员分享
var myFormUpload = new Ext.form.FormPanel({      baseCls: 'x-plain',      labelWidth: 80,         fileUpload:true,       defaultType: 'textfield',      items: [{    xtype : 'box',//  图片框    id : 'logPic',    border :'10 5 3 10',    fieldLabel : "预览照片",      width : 200,      height : 160,    autoShow:true,    autoEl : {          tag : 'img',        src: '../downloads/zanwu.jpg',        //下面这句不能删，删除后，图片预览在IE里无效               style:'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);'    }    },{    xtype : 'textfield',  //文件框    id : 'logoFile',      //name : 'logoFile',    regex : /\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([gG][iI][fF]){1}$|\.([pP][nN][gG]){1}$|\.([bB][mM][pP]){1}$/,      inputType : 'file',      fieldLabel : '上传图片',      width : 280,     listeners : {            'render':function(){              var logoFileCmp = Ext.get('logoFile');              logoFileCmp.on('change',function(field,newValue,oldValue){//图片预览                       var url = 'file:///' + logoFileCmp.getValue();//得到选择的图片路径                        //是否是规定的图片类型                      var img_reg = /\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([gG][iI][fF]){1}$|\.([pP][nN][gG]){1}$|\.([bB][mM][pP]){1}$/;            if (img_reg.test(url)) {                     if(Ext.isIE){                       var image = Ext.get('logPic').dom;                          image.src = Ext.BLANK_IMAGE_URL;  //覆盖原来的图片                          //image.src=window.URL.createObjectURL(logoFileCmp.dom.files.item(0));                          image.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = url;                        }else{                            //支持FF                           image.src=window.URL.createObjectURL(logoFileCmp.dom.files.item(0));                             }               }else{                      Ext.Msg.alert('提示','请选择图片类型的文件！');                                  return ;                     }                  },this);               }}}]});   var fmWindow = new Ext.Window({  modal:true,              title:"图片上传",              width:400,              closable:false,              height:300,              minWidth:300,              minHeight:100,              layout:"fit",              plain:true,              bodyStyle:"padding:5px;",              buttonAlign:"center",              imageLock:false,                            items: [myFormUpload],                    buttons:[{                 text:"上传",                 handler:function () {if (myFormUpload.form.isValid()) {      myFormUpload.getForm().submit({      url : './uploadRecFileImg.action',params : {fileaddr : _fileaddr,serverip:_serverip},method : 'POST',       success:function (form, action) {if (action.result.msg == '上传成功') {Ext.Msg.alert("提示", "上传成功！设为封面成功");ds_imgfile_view.reload(); fmWindow.close();}else if(action.result.msg == '上传失败') {Ext.Msg.alert("提示", "上传失败");ds_imgfile_view.reload(); }fmWindow.close();}, failure:function (form, action) {       Ext.Msg.alert("Error", action.result.msg);}});}}},{text:"取消", handler:function(){ fmWindow.close();}}],listeners : {beforeclose : function() {// 关闭前销毁fmWindow.destroy();}}}).show();