原文地址: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：文件上傳過程中的提示效果圖
-