当前位置：首页 > news >正文

extjs上传图片预览

news 来源：原创 2024/9/21 17:32:22

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:false
37                         }]
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:75
70                             }]
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 }