Extjs upload（ext官网例子）
http://dev.sencha.com/deploy/dev/examples/form/file-upload.html
?
file-upload.zip是js代码
fileuploadfield.zip是组建库（EXT官网自带的）
?
详细代码如下：
html
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>File Upload Field Example</title> <!-- ** CSS ** --> <!-- base library --> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <!-- overrides to base library --> <!-- page specific --> <link rel="stylesheet" type="text/css" href="../shared/examples.css" /> <link rel="stylesheet" type="text/css" href="../ux/fileuploadfield/css/fileuploadfield.css"/> <style type=text/css> .upload-icon { background: url('../shared/icons/fam/image_add.png') no-repeat 0 0 !important; } #fi-button-msg { border: 2px solid #ccc; padding: 5px 10px; background: #eee; margin: 5px; float: left; } </style> <!-- ** Javascript ** --> <!-- ExtJS library: base/adapter --> <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> <!-- ExtJS library: all widgets --> <script type="text/javascript" src="../../ext-all.js"></script> <!-- overrides to base library --> <script type="text/javascript" src="../ux/fileuploadfield/FileUploadField.js"></script> <!-- page specific --> <script type="text/javascript" src="file-upload.js"></script></head><body> <h1>File Upload Field</h1> <p>This example utilizes a custom extension to implement a file upload field. The js is not minified so it is readable. See <a href="file-upload.js">file-input.js</a> and <a href="../ux/fileuploadfield/FileUploadField.js">FileUploadField.js</a>.</p> <p> <b>Basic FileUpload</b><br /> A typical file upload field with Ext style. Direct editing of the text field cannot be done in a consistent, cross-browser way, so it is always read-only in this implementation. <div id="fi-basic"></div> <div id="fi-basic-btn"></div> </p> <p> <b>Basic FileUpload (Button-only)</b><br /> You can also render the file input as a button without the text field, with access to the field's value via the standard <tt>Ext.form.TextField</tt> interface or by handling the <tt>fileselected</tt> event (as in this example). <div id="fi-button"></div> <div id="fi-button-msg" style="display:none;"></div> <div name="code">/*! * Ext JS Library 3.2.1 * Copyright(c) 2006-2010 Ext JS, Inc. * licensing@extjs.com * 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 compatExt.form.FileUploadField = Ext.ux.form.FileUploadField;?
?js
/*! * Ext JS Library 3.2.1 * Copyright(c) 2006-2010 Ext JS, Inc. * licensing@extjs.com * http://www.extjs.com/license */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 fibasic = new Ext.ux.form.FileUploadField({ renderTo: 'fi-basic', width: 400 }); new Ext.Button({ text: 'Get File Path', renderTo: 'fi-basic-btn', handler: function(){ var v = fibasic.getValue(); msg('Selected File', v && v != '' ? v : 'None'); } }); var fbutton = new Ext.ux.form.FileUploadField({ renderTo: 'fi-button', buttonOnly: true, listeners: { 'fileselected': function(fb, v){ var el = Ext.fly('fi-button-msg'); el.update('<b>Selected:</b> '+v); if(!el.isVisible()){ el.slideIn('t', { duration: .2, easing: 'easeIn', callback: function(){ el.highlight(); } }); }else{ el.highlight(); } } } }); var fp = new Ext.FormPanel({ renderTo: 'fi-form', fileUpload: true, width: 500, frame: true, title: 'File Upload Form', autoHeight: true, bodyStyle: 'padding: 10px 10px 0 10px;', labelWidth: 50, defaults: { anchor: '95%', allowBlank: false, msgTarget: 'side' }, items: [{ xtype: 'textfield', fieldLabel: 'Name' },{ 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: 'file-upload.php', waitMsg: 'Uploading your photo...', success: function(fp, o){ msg('Success', 'Processed file "'+o.result.file+'" on the server'); } }); } } },{ text: 'Reset', handler: function(){ fp.getForm().reset(); } }] });});?
?