ExtJs典型用法之文件上传

最新推荐文章于 2021-08-05 14:02:54 发布

超然

最新推荐文章于 2021-08-05 14:02:54 发布

阅读量777

点赞数

分类专栏： extjs

extjs 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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

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

前台代码：

[xhtml]view plaincopy 
   
 <html>  
     <head>  
         <link href="ext/resources/css/ext-all.css" mce_href="ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />  
         <mce:script src="ext/adapter/ext/ext-base.js" mce_src="ext/adapter/ext/ext-base.js" type="text/javascript"></mce:script>  
         <mce:script src="ext/ext-all.js" mce_src="ext/ext-all.js" type="text/javascript"></mce:script>  
         <mce:script type="text/javascript"><!--  
             Ext.onReady(function(){  
                     var fpFileUpload=new Ext.FormPanel({  
                         id:'fpFileUpload',  
                         frame:true,  
                         fileUpload:true,  
                         //url:'Default.aspx',  
                         items:[  
                             {  
                                 xtype:'textfield',  
                                 allowBlank:false,  
                                 fieldLabel:'选择文件',  
                                 inputType:'file',  
                                 name:'fileName'  
                             }  
                         ],  
                         buttonAlign:'center',  
                         buttons:[  
                             {  
                                 text:'上传',  
                                 handler:function(){  
                                     if(fpFileUpload.form.isValid()){  
                                         fpFileUpload.form.submit({  
                                             method:'post',  
                                             url:'Default.aspx',  
                                             waitMsg:'文件上传中...',  
                                             success: function() {  
                                                 Ext.Msg.alert("系统提示", "文件上传成功！");  
                                             },  
                                             failure: function() {  
                                                 Ext.Msg.alert("系统提示", "文件上传失败！");  
                                             }  
                                         });  
                                     }else{  
                                         Ext.Msg.alert("系统提示","请选择文件后再上传！");  
                                     }  
                                 }  
                             },  
                             {  
                                 text:'取消',  
                                 handler:function(){  
                                     winFielUpload.hide();  
                                 }  
                             }  
                         ]  
                     });  
                     var winFielUpload=new Ext.Window({  
                         id:'win',  
                         title:'文件上传',  
                         //****renderTo:'divWindow',//对于window不要使用renderTo属性，只需要调用show方法就可以显示，添加此属性会难以控制其位置  
                         width:350,  
                         height:100,  
                         layout:'fit',  
                         autoDestory:true,  
                         modal:true,  
                         closeAction:'hide',  
                         items:[  
                             fpFileUpload  
                         ]  
                     });  
                     window.winFielUpload=winFielUpload;  
                   
             });  
             function showWindow(){  
                     winFielUpload.show();  
             }  
           
 // --></mce:script>  
     </head>  
     <body>  
         <div id="divWindow"></div>  
         <input type="button" value="上传文件" onclick="showWindow();">  
     </body>  
 </html>  

后台代码：

[c-sharp]view plaincopy 
   
 using System;  
 using System.Collections.Generic;  
 using System.Linq;  
 using System.Web;  
 using System.Web.UI;  
 using System.Web.UI.WebControls;  
 using System.IO;  
 using System.Web.Script.Serialization;  
 namespace FileUpload  
 {  
     public partial class _Default : System.Web.UI.Page  
     {  
         protected void Page_Load(object sender, EventArgs e)  
         {  
             try  
             {  
                 if (Request.Files.Count == 0)  
                 {  
                     return;  
                 }  
                 else  
                 {  
                     HttpPostedFile file = Request.Files[0];  
                     if (file.ContentLength > 0 && !string.IsNullOrEmpty(file.FileName))  
                     {  
                         file.SaveAs(Server.MapPath("/UploadFile/" + Path.GetFileName(file.FileName)));  
                         //FileInfo fileInfo=new FileInfo(Server.MapPath("/UploadFile/" + Path.GetFileName(file.FileName)));  
                         //JavaScriptSerializer jsSerializer = new JavaScriptSerializer();  
                         Response.Write("{success:true}");//前台就是通过json中success的true活false来判断是否成功的，切记！  
                     }  
                 }  
             }  
             catch (Exception ex)  
             {  
                 Response.Write("{success:false}");  
             }  
             Response.End();  
         }  
     }  
 }  

运行效果：

超然

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJs典型用法之文件上传

从今天起我会和大家一块来学习ExtJs的典型操作，前面我写了一些ExtJs的文章，那个系列主要是系统的来介绍Ext如何使用。但是我们知道如果仅仅那样来介绍会遗漏很多实用的内容，因此我今后会继续写一些常用的Ext操作方面的内容，暂且叫做"ExtJs典型用法"系列吧。今天我们首先看一下Ext中如何上传文件。我们知道在传统的html中有file组件（也就是type为file的input组件），但
复制链接

扫一扫

专栏目录