原文地址:http://www.stepday.com/topic/?459
-
作文一个ExtJs的入门汉子，学习起来的确是比较费劲的事情，不过如今在这样一个网络资源如此丰富的时代，依然不是那么难了的。基本上都是Copy过来加以部分改造即可实现自己想要的功能，加之如今的第三方开发者也大发慈悲地写出了API的帮助文档以及示例文档。关于ExtJs内的文件上传，将从以下几个方面进行展开讲解：
一、ExtJs文件上传版面的布局以及配置
因为ExtJs的文件上传组件filefield是基于form表单提交数据的，所以我们需要创建Ext.form.Panel，页面布局及其配置代码如下所示：
001.<html xmlns="http://www.w3.org/1999/xhtml">002.<head runat="server">003.<title>ExtJs的文件上传</title>004.<!-- ExtJS -->005.<link rel="stylesheet"type="text/css"href="/css/ext-all.css"/>006.<script type="text/javascript"src="/js/ext-all.js"></script>007.<!-- Shared -->008.<link rel="stylesheet"type="text/css"href="/css/example.css"/>009.<script type="text/javascript"language="javascript">010.Ext.require([011.'Ext.form.field.File',012.'Ext.form.Panel',013.'Ext.window.MessageBox'014.]);015.016.Ext.onReady(function() {017.//定义一个消息提示方法018.varmsg =function(title, msg) {019.Ext.Msg.show({020.title: title,021.msg: msg,022.minWidth: 200,023.modal:true,024.icon: Ext.Msg.INFO,025.buttons: Ext.Msg.OK026.});027.};028.//创建form表单029.Ext.create('Ext.form.Panel', {030.renderTo:'divUpload',//form表单的承载对象031.width: 600,//表单宽度032.frame:true,033.title:'图片上传',//表单名称034.bodyPadding:'10 10 0',//表单内项目距离边框的值035.//配置默认属性036.defaults: {037.anchor:'90%',038.allowBlank:false,039.msgTarget:'side',040.labelWidth: 100041.},042.//表单内的项目配置043.items: [{044.xtype:'textfield',045.fieldLabel:'图片说明',046.name:'picDesc'//这个是文本框的name值，post表单数据的时候，用于Request["picDesc"] 获取数据之用047.}, {048.xtype:'filefield',049.id:'fileUpload',050.emptyText:'请选择一个图片文件',051.fieldLabel:'图片路径',052.name:'fileUpload',053.buttonText:'浏览',054.buttonConfig: {055.iconCls:'upload-icon'056.},057.//添加事件058.listeners: {059.//装载的时候添加监听事件060."render":function() {061.//这里尤其要注意的是使用Ext.get('upload'),而不是Ext.getCmp('upload'),否则不起效果，若使用后者，则只有当文本框的内容改变的时候，才会触发change 事件062.Ext.get('fileUpload').on("change",function() {063.debugger064.varuploadFileName = Ext.getCmp('fileUpload').getValue();065.//只允许上传jpg|JPG文件066.if(uploadFileName.substring(uploadFileName.lastIndexOf(".") + 1).toLowerCase() !="jpg"|| uploadFileName.substring(epath.lastIndexOf(".") + 1).toLowerCase() !="JPG") {067.msg('Error','只允许上传pg|JPG文件!');068.}069.})070.}071.}072.}],073.buttons: [{074.text:'上 传',075.handler:function() {076.varform =this.up('form').getForm();077.//验证表单078.if(form.isValid()) {079.//获取所选择文件的名称080.varepath = form.findField("fileUpload").getValue();081.//只允许上传jpg|JPG件082.if(epath.substring(epath.lastIndexOf(".") + 1).toLowerCase() =="jpg"|| epath.substring(epath.lastIndexOf(".") + 1).toLowerCase() =="JPG") {083.form.submit({084.url:'/Pic/Upload_Ajax.aspx',085.waitMsg:'图片正在上传，请耐心等待....',086.success:function(fp, o) {087.msg('图片上传成功', o.message);088.},089.failure:function(fp, o) {090.msg("错误提示", o.message);091.}092.});093.}else{094.msg('错误提示','只允许上传jpg|JPG文件!');095.}096.}097.}098.}, {099.text:'取 消',100.handler:function() {101.this.up('form').getForm().reset();102.}103.}]104.});105.106.});107.</script>108.</head>109.<body>110.<form id="form1"runat="server">111.<div id="divUpload">112.</div>113.</form>114.</body>115.</html>
二、编写Upload_Ajax.aspx的相关代码 获取表单数据
核心代码如下所示：
01.protectedvoidPage_Load(objectsender, EventArgs e)02.{03.HttpPostedFile file = Request.Files["fileUpload"];04.//图片描述05.stringFileDesc = Request["picDesc"];06.07.if(file !=null)08.{09.//上传图片路径10.stringPicSavePath =string.Format("/images/upload/{0}", file.FileName);11.try12.{13.file.SaveAs(MapPath(PicSavePath));14.}15.catch(Exception eg)16.{17.Response.Write("{success:false,flag:0,message:'"+eg.ToString()+"!'}");18.}19.Response.Write("{success:true,flag:0,message:'文件"+file.FileName+"上传成功!'}");20.}21.else22.{23.Response.Write("{success:false,flag:0,message:'参数配置错误!'}");24.}25.Response.End();26.}
三、运行效果图
图1：文件上传页面配置效果图
图2：文件上传过程中的提示效果图
-