程序博客网 > 淘宝一元起拍

extjs 上传文件 fileUpload

来源：互联网 发布：淘宝一元起拍 编辑：程序博客网 时间：2024/06/02 06:10

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

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

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

FileUploadField.js代码如下：

[javascript] view plaincopyprint?
  1. /*!
  2. * Ext JS Library 3.2.0
  3. * Copyright(c) 2006-2010 Ext JS, Inc.
  4. * licensing@extjs.com
  5. * http://www.extjs.com/license
  6. */
  7. Ext.ns('Ext.ux.form');
  9. /**
  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. */
  36. // private
  37. readOnly: true,
  39. /**
  40. * @hide
  41. * @method autoSize
  42. */
  43. autoSize: Ext.emptyFn,
  45. // private
  46. initComponent: function(){
  47. Ext.ux.form.FileUploadField.superclass.initComponent.call(this);
  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. },
  61. // private
  62. onRender : function(ct, position){
  63. Ext.ux.form.FileUploadField.superclass.onRender.call(this, ct, position);
  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();
  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. }));
  78. if(this.buttonOnly){
  79. this.el.hide();
  80. this.wrap.setWidth(this.button.getEl().getWidth());
  81. }
  83. this.bindListeners();
  84. this.resizeEl = this.positionEl =this.wrap;
  85. },
  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. },
  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. },
  121. reset : function(){
  122. this.fileInput.remove();
  123. this.createFileInput();
  124. this.bindListeners();
  125. Ext.ux.form.FileUploadField.superclass.reset.call(this);
  126. },
  128. // private
  129. getFileInputId: function(){
  130. return this.id + '-file';
  131. },
  133. // private
  134. onResize : function(w, h){
  135. Ext.ux.form.FileUploadField.superclass.onResize.call(this, w, h);
  137. this.wrap.setWidth(w);
  139. if(!this.buttonOnly){
  140. var w = this.wrap.getWidth() -this.button.getEl().getWidth() - this.buttonOffset;
  141. this.el.setWidth(w);
  142. }
  143. },
  145. // private
  146. onDestroy: function(){
  147. Ext.ux.form.FileUploadField.superclass.onDestroy.call(this);
  148. Ext.destroy(this.fileInput, this.button, this.wrap);
  149. },
  151. onDisable: function(){
  152. Ext.ux.form.FileUploadField.superclass.onDisable.call(this);
  153. this.doDisable(true);
  154. },
  156. onEnable: function(){
  157. Ext.ux.form.FileUploadField.superclass.onEnable.call(this);
  158. this.doDisable(false);
  160. },
  162. // private
  163. doDisable: function(disabled){
  164. this.fileInput.dom.disabled = disabled;
  165. this.button.setDisabled(disabled);
  166. },
  169. // private
  170. preFocus : Ext.emptyFn,
  172. // private
  173. alignErrorIcon : function(){
  174. this.errorIcon.alignTo(this.wrap,'tl-tr', [2, 0]);
  175. }
  177. });
  179. Ext.reg('fileuploadfield', Ext.ux.form.FileUploadField);
  181. // backwards compat
  182. Ext.form.FileUploadField = Ext.ux.form.FileUploadField;

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

[xhtml] view plaincopyprint?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title></title>
  6. <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" mce_href="ext/resources/css/ext-all.css"/>
  7. <script type="text/javascript" src="ext/adapter/ext/ext-base.js" mce_src="ext/adapter/ext/ext-base.js"></script>
  8. <script src="ext/ext-all-debug.js" mce_src="ext/ext-all-debug.js" type="text/javascript"></script>
  9. <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>
  39. <script type="text/javascript"><!--
  40. Ext.onReady(function() {
  42. Ext.QuickTips.init();
  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. });
  54. };
  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. });
  107. // --></script>
  108. </head>
  109. <body>
  110. <div id="fi-form"></div>
  112. </body>
  113. </html>

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

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

在Page_Load中加入代码：

[c-sharp] view plaincopyprint?
  1. string newname = Request["txtname"];//获取重命名
  2. HttpPostedFile postedFile = Request.Files["photo-path"];//获取上传信息对象
  3. string filename = postedFile.FileName;//获取上传的文件路径
  4. string tempPath = System.Configuration.ConfigurationManager.AppSettings["NewsFolderPath"];//获取保存文件夹路径，我是设置在webconfig中了。
  5. string savepath = Server.MapPath(tempPath);//获取保存路径
  6. string sExtension = filename.Substring(filename.LastIndexOf('.'));//获取拓展名
  7. if (!Directory.Exists(savepath))
  8. Directory.CreateDirectory(savepath);
  9. string sNewFileName = DateTime.Now.ToString("yyyyMMddhhmmsfff");
  10. postedFile.SaveAs(savepath + @"/" + sNewFileName + sExtension);//保存
  12. Response.Write("{success:true, files:'文件路径：" + filename +" 重命名" + newname + "'}");

演示图如下：

上传中：

上传ok：


原文链接：http://blog.csdn.net/lzy_1515/article/details/5734500


0 0
淘宝一元起拍 淘宝一元起拍
原创粉丝点击
热门IT博客
shift jsshift js
自学高中数学软件自学高中数学软件
mac 杀毒软件 知乎
江西财经大学就业知乎
法属圭亚那知乎
java中迭代器的作用
淘宝页面装修素材
淘宝怎么抢购秒杀快
淘宝网店复制
剑三卡卢比捏脸数据
淘宝蚂蚁花呗如何开通
ubuntu tcpspeed
jsundefined和null知乎
阿里云合作伙伴 赚钱
算法小时代
手机哪款好 知乎
翻译日语的软件
云计算通俗讲义 pdf
淘宝文案策划怎么写
mac面料
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 广播开头语美句子 语字开头的成语 总结开头语和结束语 语的成语开头 语字开头的成语接龙 招聘开头语 心得体会开头语样板 写信的开头语 广播开头语和结束语 自我介绍开头语 语开头的成语接龙 从字开头语大全四字成语 开席开头语 幼儿园小班美篇开头语 有关教师培训做美篇开头语 班级美篇精彩的开头语 富山奇蝶一年开几次花 奇奇开挖土机 命运2奇珍异兽园怎么开 开乳师 开奶师多少钱 开奶师培训 开奶师培训班 奶师 从开始 从秦时开始 武汉灯光秀几点开始 重庆灯光秀几点开始 灯光秀几点开始 大玉米灯光秀几点开始 上海灯光秀几点开始 合肥灯光秀几点开始 昆明池灯光秀2019几点开始 南开大学灯光秀几点开始 2019重庆市灯光秀几点开始 古穿今从网红开始 东川红土地开始收费2018 红不红 独生之女费什么时候开始领 七孔刀 管道开孔机

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里