您的位置：首页 > Web前端 > JavaScript

ExtJs典型用法之文件上传

2010-11-02 22:33 351 查看

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

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

前台代码：

<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>

后台代码：

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();
        }
    }
}

运行效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航