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 }