简单实用 直接可以用的图片上传器

1. //上传图片类型   
2. var img_reg = /.([jJ][pP][gG]){1}$|.([jJ][pP][eE][gG]){1}$|.([gG][iI][fF]){1}$|.([pP][nN][gG]){1}$|.([bB][mM][pP]){1}$/;   
3.  
4. var win_uploadImage = new Ext.Window({   
5.    layout: 'fit' ,   
6.    width:380,   
7.    closeAction: 'hide' ,   
8.    height:380,   
9.    resizable: false ,   
10.    shadow: false ,   
11.    modal: true ,   
12.    closable: true ,   
13.    bodyStyle: 'padding: 5 5 5 5' ,   
14.    animCollapse: true ,   
15.    imageIndexName: '' ,   
16.    items:[{   
17.        xtype: 'form' ,   
18.        id: 'image-upload-form' ,   
19.        frame: true ,   
20.        border: false ,   
21.        isAdd: false ,   
22.        enctype: 'multipart/form-data' ,   
23.        fileUpload : true ,   
24.        layout : 'form' ,   
25.        items:[{   
26.           id : 'file-idx' ,   
27.           name : 'file' ,   
28.           inputType : "file" ,   
29.           fieldLabel : '上传图片' ,   
30.           xtype : 'textfield' ,   
31.           blankText: '上传图片不能为空' ,   
32.           anchor : '100%'    
33.        },{   
34.           xtype : 'box' ,      
35.           id : 'browseImage' ,   
36.           fieldLabel : "预览图片" ,      
37.           autoEl : {   
38.               width : 300,   
39.               height : 300,   
40.               tag : 'img' ,   
41.                // type : 'image',   
42.               src : Ext.BLANK_IMAGE_URL,   
43.               style : 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);' ,      
44.               complete : 'off' ,      
45.               id : 'imageBrowse'  
46.           }   
47.        }   
48.        ],   
49.        listeners : {      
50.            'render' : function (f) {   
51.                //   
52.                this .form.findField( 'file-idx' ).on( 'render' , function () {   
53.                    //通過change事件,图片也动态跟踪选择的图片变化   
54.                    Ext.get( 'file-idx' ).on( 'change' ,   
55.                        function (field, newValue, oldValue) {   
56.                        //得到选择的图片路径   
57.                        var url = 'file://' + Ext.get( 'file-idx' ).dom.value;   
58.                        //alert("url = " + url);      
59.                        //是否是规定的图片类型   
60.                        if (img_reg.test(url)) {   
61.                            if (Ext.isIE) {   
62.                                var image = Ext.get( 'imageBrowse' ).dom;      
63.                                image.src = Ext.BLANK_IMAGE_URL; // 覆盖原来的图片   
64.                                image.filters.item( "DXImageTransform.Microsoft.AlphaImageLoader" ).src = url;      
65.                            } // 支持FF   
66.                            else {   
67.                                Ext.get( 'imageBrowse' ).dom.src = Ext.get( 'file-idx' ).dom.files.item(0).getAsDataURL();   
68.                            }   
69.                        }   
70.                    }, this );      
71.                }, this );      
72.            }      
73.        },    
74.        buttons:[{   
75.           text: '关闭' ,   
76.           handler: function (){   
77.                win_uploadImage.hide();   
78.           }   
79.           },{   
80.                text: '上传' ,   
81.                handler: function () {   
82.                    var furl= "" ;   
83.                    furl = Ext.getCmp( 'image-upload-form' ).form.findField( 'file' ).getValue();   
84.                    var type = furl.substring(furl.length - 3).toLowerCase();   
85.                    if (furl == "" || furl == null ) {   
86.                        return ;   
87.                    }   
88.                    if (type != 'jpg' && type != 'bmp' && type != 'gif' && type != 'png' ) {   
89.                        alert( '仅支持jpg、bmp、gif、png格式的图片' );   
90.                        return ;   
91.                    }   
92.                  
93.                   Ext.getCmp( 'image-upload-form' ).form.submit({   
94.                        clienValidation: true ,   
95.                        waitMsg: '正在上传请稍候' ,   
96.                        waitTitle: '提示' ,   
97.                        url: 'upload.do' ,   
98.                        method: 'POST' ,   
99.                        success: function (form,action){   
100.                            var picName = action.result.data;   
101.                            if (win_uploadImage.imageIndexName!= '' ){   
102.                                Ext.getCmp(win_uploadImage.imageIndexName).setValue(picName);   
103.                            }   
104.                            //reset form   
105.                            Ext.getCmp( 'image-upload-form' ).form.el.dom.reset();   
106.                            if (Ext.isIE) {   
107.                                var i_image = Ext.get( 'imageBrowse' ).dom;   
108.                                i_image.src = Ext.BLANK_IMAGE_URL;   
109.                                i_image.filters.item( "DXImageTransform.Microsoft.AlphaImageLoader" ).src = Ext.BLANK_IMAGE_URL;   
110.                            } else {   
111.                                Ext.get( 'imageBrowse' ).dom.src = Ext.BLANK_IMAGE_URL;   
112.                            }   
113.                               
114.                            win_uploadImage.hide();   
115.                        },   
116.                        failure: function (form,action){   
117.                            Ext.MessageBox.show({title: '失败' ,msg: '上传失败!' ,buttons: Ext.MessageBox.OK,icon: Ext.MessageBox.ERROR});   
118.                        }   
119.                   })   
120.                }   
121.           }   
122.       ]   
123.}]   
124.});  
1. //上传图片类型   
2. var img_reg = /.([jJ][pP][gG]){1}$|.([jJ][pP][eE][gG]){1}$|.([gG][iI][fF]){1}$|.([pP][nN][gG]){1}$|.([bB][mM][pP]){1}$/;   
3.  
4. var win_uploadImage = new Ext.Window({   
5.    layout: 'fit' ,   
6.    width:380,   
7.    closeAction: 'hide' ,   
8.    height:380,   
9.    resizable: false ,   
10.    shadow: false ,   
11.    modal: true ,   
12.    closable: true ,   
13.    bodyStyle: 'padding: 5 5 5 5' ,   
14.    animCollapse: true ,   
15.    imageIndexName: '' ,   
16.    items:[{   
17.        xtype: 'form' ,   
18.        id: 'image-upload-form' ,   
19.        frame: true ,   
20.        border: false ,   
21.        isAdd: false ,   
22.        enctype: 'multipart/form-data' ,   
23.        fileUpload : true ,   
24.        layout : 'form' ,   
25.        items:[{   
26.           id : 'file-idx' ,   
27.           name : 'file' ,   
28.           inputType : "file" ,   
29.           fieldLabel : '上传图片' ,   
30.           xtype : 'textfield' ,   
31.           blankText: '上传图片不能为空' ,   
32.           anchor : '100%'    
33.        },{   
34.           xtype : 'box' ,      
35.           id : 'browseImage' ,   
36.           fieldLabel : "预览图片" ,      
37.           autoEl : {   
38.               width : 300,   
39.               height : 300,   
40.               tag : 'img' ,   
41.                // type : 'image',   
42.               src : Ext.BLANK_IMAGE_URL,   
43.               style : 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);' ,      
44.               complete : 'off' ,      
45.               id : 'imageBrowse'  
46.           }   
47.        }   
48.        ],   
49.        listeners : {      
50.            'render' : function (f) {   
51.                //   
52.                this .form.findField( 'file-idx' ).on( 'render' , function () {   
53.                    //通過change事件,图片也动态跟踪选择的图片变化   
54.                    Ext.get( 'file-idx' ).on( 'change' ,   
55.                        function (field, newValue, oldValue) {   
56.                        //得到选择的图片路径   
57.                        var url = 'file://' + Ext.get( 'file-idx' ).dom.value;   
58.                        //alert("url = " + url);      
59.                        //是否是规定的图片类型   
60.                        if (img_reg.test(url)) {   
61.                            if (Ext.isIE) {   
62.                                var image = Ext.get( 'imageBrowse' ).dom;      
63.                                image.src = Ext.BLANK_IMAGE_URL; // 覆盖原来的图片   
64.                                image.filters.item( "DXImageTransform.Microsoft.AlphaImageLoader" ).src = url;      
65.                            } // 支持FF   
66.                            else {   
67.                                Ext.get( 'imageBrowse' ).dom.src = Ext.get( 'file-idx' ).dom.files.item(0).getAsDataURL();   
68.                            }   
69.                        }   
70.                    }, this );      
71.                }, this );      
72.            }      
73.        },    
74.        buttons:[{   
75.           text: '关闭' ,   
76.           handler: function (){   
77.                win_uploadImage.hide();   
78.           }   
79.           },{   
80.                text: '上传' ,   
81.                handler: function () {   
82.                    var furl= "" ;   
83.                    furl = Ext.getCmp( 'image-upload-form' ).form.findField( 'file' ).getValue();   
84.                    var type = furl.substring(furl.length - 3).toLowerCase();   
85.                    if (furl == "" || furl == null ) {   
86.                        return ;   
87.                    }   
88.                    if (type != 'jpg' && type != 'bmp' && type != 'gif' && type != 'png' ) {   
89.                        alert( '仅支持jpg、bmp、gif、png格式的图片' );   
90.                        return ;   
91.                    }   
92.                  
93.                   Ext.getCmp( 'image-upload-form' ).form.submit({   
94.                        clienValidation: true ,   
95.                        waitMsg: '正在上传请稍候' ,   
96.                        waitTitle: '提示' ,   
97.                        url: 'upload.do' ,   
98.                        method: 'POST' ,   
99.                        success: function (form,action){   
100.                            var picName = action.result.data;   
101.                            if (win_uploadImage.imageIndexName!= '' ){   
102.                                Ext.getCmp(win_uploadImage.imageIndexName).setValue(picName);   
103.                            }   
104.                            //reset form   
105.                            Ext.getCmp( 'image-upload-form' ).form.el.dom.reset();   
106.                            if (Ext.isIE) {   
107.                                var i_image = Ext.get( 'imageBrowse' ).dom;   
108.                                i_image.src = Ext.BLANK_IMAGE_URL;   
109.                                i_image.filters.item( "DXImageTransform.Microsoft.AlphaImageLoader" ).src = Ext.BLANK_IMAGE_URL;   
110.                            } else {   
111.                                Ext.get( 'imageBrowse' ).dom.src = Ext.BLANK_IMAGE_URL;   
112.                            }   
113.                               
114.                            win_uploadImage.hide();   
115.                        },   
116.                        failure: function (form,action){   
117.                            Ext.MessageBox.show({title: '失败' ,msg: '上传失败!' ,buttons: Ext.MessageBox.OK,icon: Ext.MessageBox.ERROR});   
118.                        }   
119.                   })   
120.                }   
121.           }   
122.       ]   
123.}]   
124.});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值