extjs 上传文件 fileUpload

上传文件要是用asp.net的控件上传其实是很简单的问题，要是为了用户体验的提高很多的web开发人员都会采取很炫的ajax上传。

或是用flash想用的控件上传。今天我们看看extjs中如何很炫的上传文件或图片。

查了查资料发现extjs上传文件需要一个js文件FileUploadField.js，在extjs类库文件里可以找到。

FileUploadField.js代码如下：

view plaincopy to clipboardprint?
01./*! 
02. * Ext JS Library 3.2.0 
03. * Copyright(c) 2006-2010 Ext JS, Inc. 
04. * [e-mail] 
05. * http://www.extjs.com/license 
06. */ 
07.Ext.ns('Ext.ux.form');  
08. 
09./** 
10. * @class Ext.ux.form.FileUploadField 
11. * @extends Ext.form.TextField 
12. * Creates a file upload field. 
13. * @xtype fileuploadfield 
14. */ 
15.Ext.ux.form.FileUploadField = Ext.extend(Ext.form.TextField,  {  
16.    /** 
17.     * @cfg {String} buttonText The button text to display on the upload button (defaults to 
18.     * 'Browse...').  Note that if you supply a value for {@link #buttonCfg}, the buttonCfg.text 
19.     * value will be used instead if available. 
20.     */ 
21.    buttonText: 'Browse...',  
22.    /** 
23.     * @cfg {Boolean} buttonOnly True to display the file upload field as a button with no visible 
24.     * text field (defaults to false).  If true, all inherited TextField members will still be available. 
25.     */ 
26.    buttonOnly: false,  
27.    /** 
28.     * @cfg {Number} buttonOffset The number of pixels of space reserved between the button and the text field 
29.     * (defaults to 3).  Note that this only applies if {@link #buttonOnly} = false. 
30.     */ 
31.    buttonOffset: 3,  
32.    /** 
33.     * @cfg {Object} buttonCfg A standard {@link Ext.Button} config object. 
34.     */ 
35. 
36.    // private  
37.    readOnly: true,  
38. 
39.    /** 
40.     * @hide 
41.     * @method autoSize 
42.     */ 
43.    autoSize: Ext.emptyFn,  
44. 
45.    // private  
46.    initComponent: function(){  
47.        Ext.ux.form.FileUploadField.superclass.initComponent.call(this);  
48. 
49.        this.addEvents(  
50.            /** 
51.             * @event fileselected 
52.             * Fires when the underlying file input field's value has changed from the user 
53.             * selecting a new file from the system file selection dialog. 
54.             * @param {Ext.ux.form.FileUploadField} this 
55.             * @param {String} value The file value returned by the underlying file input field 
56.             */ 
57.            'fileselected' 
58.        );  
59.    },  
60. 
61.    // private  
62.    onRender : function(ct, position){  
63.        Ext.ux.form.FileUploadField.superclass.onRender.call(this, ct, position);  
64. 
65.        this.wrap = this.el.wrap({cls:'x-form-field-wrap x-form-file-wrap'});  
66.        this.el.addClass('x-form-file-text');  
67.        this.el.dom.removeAttribute('name');  
68.        this.createFileInput();  
69. 
70.        var btnCfg = Ext.applyIf(this.buttonCfg || {}, {  
71.            text: this.buttonText  
72.        });  
73.        this.button = new Ext.Button(Ext.apply(btnCfg, {  
74.            renderTo: this.wrap,  
75.            cls: 'x-form-file-btn' + (btnCfg.iconCls ? ' x-btn-icon' : '')  
76.        }));  
77. 
78.        if(this.buttonOnly){  
79.            this.el.hide();  
80.            this.wrap.setWidth(this.button.getEl().getWidth());  
81.        }  
82. 
83.        this.bindListeners();  
84.        this.resizeEl = this.positionEl = this.wrap;  
85.    },  
86.      
87.    bindListeners: function(){  
88.        this.fileInput.on({  
89.            scope: this,  
90.            mouseenter: function() {  
91.                this.button.addClass(['x-btn-over','x-btn-focus'])  
92.            },  
93.            mouseleave: function(){  
94.                this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])  
95.            },  
96.            mousedown: function(){  
97.                this.button.addClass('x-btn-click')  
98.            },  
99.            mouseup: function(){  
100.                this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])  
101.            },  
102.            change: function(){  
103.                var v = this.fileInput.dom.value;  
104.                this.setValue(v);  
105.                this.fireEvent('fileselected', this, v);      
106.            }  
107.        });   
108.    },  
109.      
110.    createFileInput : function() {  
111.        this.fileInput = this.wrap.createChild({  
112.            id: this.getFileInputId(),  
113.            name: this.name||this.getId(),  
114.            cls: 'x-form-file',  
115.            tag: 'input',  
116.            type: 'file',  
117.            size: 1  
118.        });  
119.    },  
120.      
121.    reset : function(){  
122.        this.fileInput.remove();  
123.        this.createFileInput();  
124.        this.bindListeners();  
125.        Ext.ux.form.FileUploadField.superclass.reset.call(this);  
126.    },  
127. 
128.    // private  
129.    getFileInputId: function(){  
130.        return this.id + '-file';  
131.    },  
132. 
133.    // private  
134.    onResize : function(w, h){  
135.        Ext.ux.form.FileUploadField.superclass.onResize.call(this, w, h);  
136. 
137.        this.wrap.setWidth(w);  
138. 
139.        if(!this.buttonOnly){  
140.            var w = this.wrap.getWidth() - this.button.getEl().getWidth() - this.buttonOffset;  
141.            this.el.setWidth(w);  
142.        }  
143.    },  
144. 
145.    // private  
146.    onDestroy: function(){  
147.        Ext.ux.form.FileUploadField.superclass.onDestroy.call(this);  
148.        Ext.destroy(this.fileInput, this.button, this.wrap);  
149.    },  
150.      
151.    onDisable: function(){  
152.        Ext.ux.form.FileUploadField.superclass.onDisable.call(this);  
153.        this.doDisable(true);  
154.    },  
155.      
156.    onEnable: function(){  
157.        Ext.ux.form.FileUploadField.superclass.onEnable.call(this);  
158.        this.doDisable(false);  
159. 
160.    },  
161.      
162.    // private  
163.    doDisable: function(disabled){  
164.        this.fileInput.dom.disabled = disabled;  
165.        this.button.setDisabled(disabled);  
166.    },  
167. 
168. 
169.    // private  
170.    preFocus : Ext.emptyFn,  
171. 
172.    // private  
173.    alignErrorIcon : function(){  
174.        this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);  
175.    }  
176. 
177.});  
178. 
179.Ext.reg('fileuploadfield', Ext.ux.form.FileUploadField);  
180. 
181.// backwards compat  
182.Ext.form.FileUploadField = Ext.ux.form.FileUploadField; 
/*!
 * Ext JS Library 3.2.0
 * Copyright(c) 2006-2010 Ext JS, Inc.
 * [e-mail]
 * http://www.extjs.com/license
 */
Ext.ns('Ext.ux.form');

/**
 * @class Ext.ux.form.FileUploadField
 * @extends Ext.form.TextField
 * Creates a file upload field.
 * @xtype fileuploadfield
 */
Ext.ux.form.FileUploadField = Ext.extend(Ext.form.TextField,  {
    /**
     * @cfg {String} buttonText The button text to display on the upload button (defaults to
     * 'Browse...').  Note that if you supply a value for {@link #buttonCfg}, the buttonCfg.text
     * value will be used instead if available.
     */
    buttonText: 'Browse...',
    /**
     * @cfg {Boolean} buttonOnly True to display the file upload field as a button with no visible
     * text field (defaults to false).  If true, all inherited TextField members will still be available.
     */
    buttonOnly: false,
    /**
     * @cfg {Number} buttonOffset The number of pixels of space reserved between the button and the text field
     * (defaults to 3).  Note that this only applies if {@link #buttonOnly} = false.
     */
    buttonOffset: 3,
    /**
     * @cfg {Object} buttonCfg A standard {@link Ext.Button} config object.
     */

    // private
    readOnly: true,

    /**
     * @hide
     * @method autoSize
     */
    autoSize: Ext.emptyFn,

    // private
    initComponent: function(){
        Ext.ux.form.FileUploadField.superclass.initComponent.call(this);

        this.addEvents(
            /**
             * @event fileselected
             * Fires when the underlying file input field's value has changed from the user
             * selecting a new file from the system file selection dialog.
             * @param {Ext.ux.form.FileUploadField} this
             * @param {String} value The file value returned by the underlying file input field
             */
            'fileselected'
        );
    },

    // private
    onRender : function(ct, position){
        Ext.ux.form.FileUploadField.superclass.onRender.call(this, ct, position);

        this.wrap = this.el.wrap({cls:'x-form-field-wrap x-form-file-wrap'});
        this.el.addClass('x-form-file-text');
        this.el.dom.removeAttribute('name');
        this.createFileInput();

        var btnCfg = Ext.applyIf(this.buttonCfg || {}, {
            text: this.buttonText
        });
        this.button = new Ext.Button(Ext.apply(btnCfg, {
            renderTo: this.wrap,
            cls: 'x-form-file-btn' + (btnCfg.iconCls ? ' x-btn-icon' : '')
        }));

        if(this.buttonOnly){
            this.el.hide();
            this.wrap.setWidth(this.button.getEl().getWidth());
        }

        this.bindListeners();
        this.resizeEl = this.positionEl = this.wrap;
    },
   
    bindListeners: function(){
        this.fileInput.on({
            scope: this,
            mouseenter: function() {
                this.button.addClass(['x-btn-over','x-btn-focus'])
            },
            mouseleave: function(){
                this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])
            },
            mousedown: function(){
                this.button.addClass('x-btn-click')
            },
            mouseup: function(){
                this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])
            },
            change: function(){
                var v = this.fileInput.dom.value;
                this.setValue(v);
                this.fireEvent('fileselected', this, v);   
            }
        });
    },
   
    createFileInput : function() {
        this.fileInput = this.wrap.createChild({
            id: this.getFileInputId(),
            name: this.name||this.getId(),
            cls: 'x-form-file',
            tag: 'input',
            type: 'file',
            size: 1
        });
    },
   
    reset : function(){
        this.fileInput.remove();
        this.createFileInput();
        this.bindListeners();
        Ext.ux.form.FileUploadField.superclass.reset.call(this);
    },

    // private
    getFileInputId: function(){
        return this.id + '-file';
    },

    // private
    onResize : function(w, h){
        Ext.ux.form.FileUploadField.superclass.onResize.call(this, w, h);

        this.wrap.setWidth(w);

        if(!this.buttonOnly){
            var w = this.wrap.getWidth() - this.button.getEl().getWidth() - this.buttonOffset;
            this.el.setWidth(w);
        }
    },

    // private
    onDestroy: function(){
        Ext.ux.form.FileUploadField.superclass.onDestroy.call(this);
        Ext.destroy(this.fileInput, this.button, this.wrap);
    },
   
    onDisable: function(){
        Ext.ux.form.FileUploadField.superclass.onDisable.call(this);
        this.doDisable(true);
    },
   
    onEnable: function(){
        Ext.ux.form.FileUploadField.superclass.onEnable.call(this);
        this.doDisable(false);

    },
   
    // private
    doDisable: function(disabled){
        this.fileInput.dom.disabled = disabled;
        this.button.setDisabled(disabled);
    },

    // private
    preFocus : Ext.emptyFn,

    // private
    alignErrorIcon : function(){
        this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
    }

});

Ext.reg('fileuploadfield', Ext.ux.form.FileUploadField);

// backwards compat
Ext.form.FileUploadField = Ext.ux.form.FileUploadField;
 

fileupload.html,显示上传的效果代码如下：

view plaincopy to clipboardprint?
01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
02. 
03.<html xmlns="http://www.w3.org/1999/xhtml"> 
04.<head> 
05.    <title></title> 
06.    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" mce_href="ext/resources/css/ext-all.css" /> 
07.    <script type="text/javascript" src="ext/adapter/ext/ext-base.js" mce_src="ext/adapter/ext/ext-base.js"></script> 
08.    <script src="ext/ext-all-debug.js" mce_src="ext/ext-all-debug.js" type="text/javascript"></script> 
09.    <script src="js/FileUploadField.js" mce_src="js/FileUploadField.js" type="text/javascript"></script> 
10.    <style type=text/css>        .upload-icon {  
11.            background: url('images/image_add.png') no-repeat 0 0 !important;  
12.        }  
13.    .x-form-file-wrap {  
14.        position: relative;  
15.        height: 22px;  
16.    }  
17.    .x-form-file-wrap .x-form-file {  
18.        position: absolute;  
19.        right: 0;  
20.        -moz-opacity: 0;  
21.        filter:alpha(opacity: 0);  
22.        opacity: 0;  
23.        z-index: 2;  
24.        height: 22px;  
25.    }  
26.    .x-form-file-wrap .x-form-file-btn {  
27.        position: absolute;  
28.        right: 0;  
29.        z-index: 1;  
30.    }  
31.    .x-form-file-wrap .x-form-file-text {  
32.        position: absolute;  
33.        left: 0;  
34.        z-index: 3;  
35.        color: #777;  
36.    }  
37.    </style> 
38. 
39.    <script type="text/javascript"><!--  
40.        Ext.onReady(function() {  
41. 
42.            Ext.QuickTips.init();  
43. 
44.            var msg = function(title, msg) {  
45.                Ext.Msg.show({  
46.                    title: title,  
47.                    msg: msg,  
48.                    minWidth: 200,  
49.                    modal: true,  
50.                    icon: Ext.Msg.INFO,  
51.                    buttons: Ext.Msg.OK  
52.                });  
53. 
54.            };  
55.              
56.            var fp = new Ext.FormPanel({  
57.                renderTo: 'fi-form',  
58.                fileUpload: true,  
59.                width: 500,  
60.                frame: true,  
61.                title: '图片上传操作',  
62.                autoHeight: true,  
63.                bodyStyle: 'padding: 10px 10px 0 10px;',  
64.                labelWidth: 50,  
65.                defaults: {  
66.                    anchor: '95%',  
67.                    allowBlank: false,  
68.                    msgTarget: 'side'  
69.                },  
70.                items: [{  
71.                    xtype: 'textfield',  
72.                    fieldLabel: 'Name',  
73.                    name:"txtname"  
74.                }, {  
75.                    xtype: 'fileuploadfield',  
76.                    id: 'form-file',  
77.                    emptyText: 'Select an image',  
78.                    fieldLabel: 'Photo',  
79.                    name: 'photo-path',  
80.                    buttonText: '',  
81.                    buttonCfg: {  
82.                        iconCls: 'upload-icon'  
83.                    }  
84.}],  
85.                    buttons: [{  
86.                        text: 'Save',  
87.                        handler: function() {  
88.                            if (fp.getForm().isValid()) {  
89.                                fp.getForm().submit({  
90.                                    url: 'Default.aspx',//后台处理的页面  
91.                                    waitMsg: 'Uploading your photo...',  
92.                                    success: function(fp, o) {  
93.                                        msg('Success', 'Processed file "' + o.result.files + '" on the server');  
94.                                    }  
95.                                });  
96.                            }  
97.                        }  
98.                    }, {  
99.                        text: 'Reset',  
100.                        handler: function() {  
101.                            fp.getForm().reset();  
102.                        }  
103.}]  
104.                    });  
105.                });  
106.      
107.// --></script> 
108.</head> 
109.<body> 
110.<div id="fi-form"></div> 
111. 
112.</body> 
113.</html> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" mce_href="ext/resources/css/ext-all.css" />
  <script type="text/javascript" src="ext/adapter/ext/ext-base.js" mce_src="ext/adapter/ext/ext-base.js"></script>
    <script src="ext/ext-all-debug.js" mce_src="ext/ext-all-debug.js" type="text/javascript"></script>
    <script src="js/FileUploadField.js" mce_src="js/FileUploadField.js" type="text/javascript"></script>
    <style type=text/css>        .upload-icon {
            background: url('images/image_add.png') no-repeat 0 0 !important;
        }
    .x-form-file-wrap {
        position: relative;
        height: 22px;
    }
    .x-form-file-wrap .x-form-file {
     position: absolute;
     right: 0;
     -moz-opacity: 0;
     filter:alpha(opacity: 0);
     opacity: 0;
     z-index: 2;
        height: 22px;
    }
    .x-form-file-wrap .x-form-file-btn {
     position: absolute;
     right: 0;
     z-index: 1;
    }
    .x-form-file-wrap .x-form-file-text {
        position: absolute;
        left: 0;
        z-index: 3;
        color: #777;
    }
    </style>

    <script type="text/javascript"><!--
        Ext.onReady(function() {

            Ext.QuickTips.init();

            var msg = function(title, msg) {
                Ext.Msg.show({
                    title: title,
                    msg: msg,
                    minWidth: 200,
                    modal: true,
                    icon: Ext.Msg.INFO,
                    buttons: Ext.Msg.OK
                });

            };
           
            var fp = new Ext.FormPanel({
                renderTo: 'fi-form',
                fileUpload: true,
                width: 500,
                frame: true,
                title: '图片上传操作',
                autoHeight: true,
                bodyStyle: 'padding: 10px 10px 0 10px;',
                labelWidth: 50,
                defaults: {
                    anchor: '95%',
                    allowBlank: false,
                    msgTarget: 'side'
                },
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Name',
                    name:"txtname"
                }, {
                    xtype: 'fileuploadfield',
                    id: 'form-file',
                    emptyText: 'Select an image',
                    fieldLabel: 'Photo',
                    name: 'photo-path',
                    buttonText: '',
                    buttonCfg: {
                        iconCls: 'upload-icon'
                    }
}],
                    buttons: [{
                        text: 'Save',
                        handler: function() {
                            if (fp.getForm().isValid()) {
                                fp.getForm().submit({
                                    url: 'Default.aspx',//后台处理的页面
                                    waitMsg: 'Uploading your photo...',
                                    success: function(fp, o) {
                                        msg('Success', 'Processed file "' + o.result.files + '" on the server');
                                    }
                                });
                            }
                        }
                    }, {
                        text: 'Reset',
                        handler: function() {
                            fp.getForm().reset();
                        }
}]
                    });
                });
   
// --></script>
</head>
<body>
<div id="fi-form"></div>

</body>
</html>

以上的代码都是显示上传的内容，而上传的关键在于后台是如何操作。

 可以新建一个Default.aspx页面来进行上传的处理。在上传的提交时都是post进行提交的，所以关键是在后台要获取上传的对象。

在Page_Load中加入代码：

view plaincopy to clipboardprint?
01.string newname = Request["txtname"]; //获取重命名  
02.HttpPostedFile postedFile = Request.Files["photo-path"];//获取上传信息对象  
03.string filename = postedFile.FileName;//获取上传的文件路径  
04.string tempPath = System.Configuration.ConfigurationManager.AppSettings["NewsFolderPath"];//获取保存文件夹路径，我是设置在webconfig中了。  
05.string savepath = Server.MapPath(tempPath);//获取保存路径  
06.        string sExtension = filename.Substring(filename.LastIndexOf('.'));//获取拓展名  
07.        if (!Directory.Exists(savepath))  
08.            Directory.CreateDirectory(savepath);  
09.        string sNewFileName = DateTime.Now.ToString("yyyyMMddhhmmsfff");  
10.        postedFile.SaveAs(savepath + @"/" + sNewFileName + sExtension);//保存  
11. 
12.        Response.Write("{success:true, files:'文件路径：" + filename + " 重命名" + newname + "'}"); 
string newname = Request["txtname"]; //获取重命名
HttpPostedFile postedFile = Request.Files["photo-path"];//获取上传信息对象
string filename = postedFile.FileName;//获取上传的文件路径
string tempPath = System.Configuration.ConfigurationManager.AppSettings["NewsFolderPath"];//获取保存文件夹路径，我是设置在webconfig中了。
string savepath = Server.MapPath(tempPath);//获取保存路径
        string sExtension = filename.Substring(filename.LastIndexOf('.'));//获取拓展名
        if (!Directory.Exists(savepath))
            Directory.CreateDirectory(savepath);
        string sNewFileName = DateTime.Now.ToString("yyyyMMddhhmmsfff");
        postedFile.SaveAs(savepath + @"/" + sNewFileName + sExtension);//保存

        Response.Write("{success:true, files:'文件路径：" + filename + " 重命名" + newname + "'}");

演示图如下：

 

上传中：

 

上传ok：

 

 

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/lzy_1515/archive/2010/07/15/5734500.aspx