extjs上传图片预览

来源：互联网发布：淘宝客吧百度贴吧编辑：程序博客网时间：2024/05/21 09:20

EXTJS图片上传预览(含本地上传前预览和服务器图片预览)

创建EXTJS组件

 1 //生成messagePanel 2     createMessagePanel:function(){ 3         return Ext.create('Ext.panel.Panel',{ 4             itemId:'compPanel', 5                 layout:'anchor', 6                 autoScroll:true, 7                 border:false, 8             items: [ 9                 {layout:'column',border:false,anchor:'-20',items:[10                     {11                         columnWidth:1,12                         layout:'form',13                         border:false,14                         items:[{15                             xtype: 'textfield',16                             itemId: 'upload_image',17                             id: 'upload_image',18                             name: 'file',19                             inputType: 'file',20                             fieldLabel: '上传照片',    21                             emptyText : '选择文件存放路径',22 //                            allowBlank: false,23                             listeners: {24                                 'render': Ext.bind(this.onShowImg, this)25                             }26                         }]27                     }                                              28                 ]},29                 {layout:'column',border:false,anchor:'-20',items:[30                     {31                         columnWidth:.25,32                         layout:'form',33                         border:false,34                         items:[{35                             xtype: 'panel',36                             border:false37                         }]38                     },                                             39                     {40                         columnWidth:.75,41                         layout:'form',42                         border:false,43                         items:[{44                             xtype: 'box',45                             itemId: 'imageShow_box',46                               autoEl: {   47                                    width: 100,48                                    height: 100,49                                    tag: 'img',   50                                    type: 'image',   51                                    src: 'images/nofoundimage.png',52                                    style: 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);width:160px;height:160px;text-align:center;',                           53                                    complete: 'off'54                                }55                         }]56                     }57                 ]},58                 {layout:'column',border:false,anchor:'-20',items:[59                         {60                             columnWidth:1,61                             layout:'form',62                             border:false,63                             items:[{64                                 xtype:'textarea',65                                    width:'100%',66                                    itemId:'content',67                                    fieldLabel:'内容',68                                    name:'content',69                                    height:7570                             }]71                         }                                              72                     ]}73             ]74         });75     },

本地上传前预览

 1 onShowImg: function(){//图片预览 2         var formPanel = this.formPanel;     3         var uploadImage = formPanel.down('textfield[itemId=upload_image]'); 4         uploadImage.on('change', function(e, t, eOpts){ 5             //上传图片类型,在前台的拦截 6             var img_reg = /\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([gG][iI][fF]){1}$|\.([pP][nN][gG]){1}$|\.([bB][mM][pP]){1}$/; 7             //得到选择的图片路径    8             var path = uploadImage.getValue(); 9             if(path!=null && !Ext.isEmpty(path)) {10                 var url = "file://" + path;11                  //是否是规定的图片类型   12                  if (img_reg.test(url)) {13                      var imageShow_box = formPanel.down('box[itemId=imageShow_box]');    //预览的图片框对象14                      if (Ext.isIE) {//IE浏览器15                          var imageShow_box_dom = imageShow_box.getEl().dom;16                         imageShow_box_dom.src = Ext.BLANK_IMAGE_URL;// 覆盖原来的图片   17                         imageShow_box_dom.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = url; 18                     } else {19                         var file = uploadImage.inputEl.dom.files[0];20                         var imageShow_box_dom = imageShow_box.getEl().dom;21                           imageShow_box_dom.src = window.URL.createObjectURL(file);22                     }23                 } else {24                      Ext.Msg.alert('提示','请选择图片类型的文件！');25                  }26             }             27         }, this);28     }

服务器图片预览

path形式:http://192.168.9.6/em/keer/emassage/1.jpg

1 if (Ext.isIE) {//IE浏览器2 　　imageShow_box_dom.src = Ext.BLANK_IMAGE_URL;// 覆盖原来的图片   3 　　imageShow_box_dom.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = path; 4 } else {5  　 imageShow_box_dom.src = path;6 }

0 0