创建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 }