ExtJs典型用法之文件上传

从今天起我会和大家一块来学习ExtJs的典型操作,前面我写了一些ExtJs的文章,那个系列主要是系统的来介绍Ext如何使用。但是我们知道如果仅仅那样来介绍会遗漏很多实用的内容,因此我今后会继续写一些常用的Ext操作方面的内容,暂且叫做"ExtJs典型用法"系列吧。

今天我们首先看一下Ext中如何上传文件。我们知道在传统的html中有file组件(也就是type为file的input组件),但是我们也可以看到在Ext中是没有相应的组件的。那么我们如何来上传文件呢?在Ext中要完成上传其实很简单,只需要设置FormPanel的fileUpload属性和textfield的inputType属性即可。好,废话不多说,直接看代码吧:

前台代码:

[xhtml]  view plain copy
  1. <html>  
  2.     <head>  
  3.         <link href="ext/resources/css/ext-all.css" mce_href="ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />  
  4.         <mce:script src="ext/adapter/ext/ext-base.js" mce_src="ext/adapter/ext/ext-base.js" type="text/javascript"></mce:script>  
  5.         <mce:script src="ext/ext-all.js" mce_src="ext/ext-all.js" type="text/javascript"></mce:script>  
  6.         <mce:script type="text/javascript"><!--  
  7.             Ext.onReady(function(){  
  8.                     var fpFileUpload=new Ext.FormPanel({  
  9.                         id:'fpFileUpload',  
  10.                         frame:true,  
  11.                         fileUpload:true,  
  12.                         //url:'Default.aspx',  
  13.                         items:[  
  14.                             {  
  15.                                 xtype:'textfield',  
  16.                                 allowBlank:false,  
  17.                                 fieldLabel:'选择文件',  
  18.                                 inputType:'file',  
  19.                                 name:'fileName'  
  20.                             }  
  21.                         ],  
  22.                         buttonAlign:'center',  
  23.                         buttons:[  
  24.                             {  
  25.                                 text:'上传',  
  26.                                 handler:function(){  
  27.                                     if(fpFileUpload.form.isValid()){  
  28.                                         fpFileUpload.form.submit({  
  29.                                             method:'post',  
  30.                                             url:'Default.aspx',  
  31.                                             waitMsg:'文件上传中...',  
  32.                                             success: function() {  
  33.                                                 Ext.Msg.alert("系统提示", "文件上传成功!");  
  34.                                             },  
  35.                                             failure: function() {  
  36.                                                 Ext.Msg.alert("系统提示", "文件上传失败!");  
  37.                                             }  
  38.                                         });  
  39.                                     }else{  
  40.                                         Ext.Msg.alert("系统提示","请选择文件后再上传!");  
  41.                                     }  
  42.                                 }  
  43.                             },  
  44.                             {  
  45.                                 text:'取消',  
  46.                                 handler:function(){  
  47.                                     winFielUpload.hide();  
  48.                                 }  
  49.                             }  
  50.                         ]  
  51.                     });  
  52.                     var winFielUpload=new Ext.Window({  
  53.                         id:'win',  
  54.                         title:'文件上传',  
  55.                         //****renderTo:'divWindow',//对于window不要使用renderTo属性,只需要调用show方法就可以显示,添加此属性会难以控制其位置  
  56.                         width:350,  
  57.                         height:100,  
  58.                         layout:'fit',  
  59.                         autoDestory:true,  
  60.                         modal:true,  
  61.                         closeAction:'hide',  
  62.                         items:[  
  63.                             fpFileUpload  
  64.                         ]  
  65.                     });  
  66.                     window.winFielUpload=winFielUpload;  
  67.                   
  68.             });  
  69.             function showWindow(){  
  70.                     winFielUpload.show();  
  71.             }  
  72.           
  73. // --></mce:script>  
  74.     </head>  
  75.     <body>  
  76.         <div id="divWindow"></div>  
  77.         <input type="button" value="上传文件" onclick="showWindow();">  
  78.     </body>  
  79. </html>  

后台代码:

[c-sharp]  view plain copy
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.IO;  
  8. using System.Web.Script.Serialization;  
  9. namespace FileUpload  
  10. {  
  11.     public partial class _Default : System.Web.UI.Page  
  12.     {  
  13.         protected void Page_Load(object sender, EventArgs e)  
  14.         {  
  15.             try  
  16.             {  
  17.                 if (Request.Files.Count == 0)  
  18.                 {  
  19.                     return;  
  20.                 }  
  21.                 else  
  22.                 {  
  23.                     HttpPostedFile file = Request.Files[0];  
  24.                     if (file.ContentLength > 0 && !string.IsNullOrEmpty(file.FileName))  
  25.                     {  
  26.                         file.SaveAs(Server.MapPath("/UploadFile/" + Path.GetFileName(file.FileName)));  
  27.                         //FileInfo fileInfo=new FileInfo(Server.MapPath("/UploadFile/" + Path.GetFileName(file.FileName)));  
  28.                         //JavaScriptSerializer jsSerializer = new JavaScriptSerializer();  
  29.                         Response.Write("{success:true}");//前台就是通过json中success的true活false来判断是否成功的,切记!  
  30.                     }  
  31.                 }  
  32.             }  
  33.             catch (Exception ex)  
  34.             {  
  35.                 Response.Write("{success:false}");  
  36.             }  
  37.             Response.End();  
  38.         }  
  39.     }  
  40. }  

运行效果:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值