位置:海鸟网 > IT > ASP.NET >

在VS.NET下创建文件上载控件

前言:
还记得在asp3.0里,我们为了上载文件可真是煞费苦心,写了一大堆的代码,可执行起来还是那么慢。但在asp.net里这个问题可以轻松搞定,这篇文章我们就探讨如何建立一个用户自定义的文件上载控件,并在我们的.ASPX程序中使用它。
正文
第一步:开发自定义文件上载控件
打开VS.NET,建立一个工程:WebApp,我们使用WebApp项目来做我们的工作。在项目WebApp上点右健选择Add下的Add Web User Control…,这时我们就可以建立一个用户自定义控件():FileUp.ascx,注意这个文件的扩展名是:.ascx。添加过程如下图所示:
图:添加用户自定义控件

图:添加用户自定义控件
我们建立FileUpload.ascx文件后,就可以象布置.html页面一样来设置布局。我们这个项目是要建立一个用户自定义的文件上载控件,在一个上载控件中有三个必备的元素,从某种意义上讲也可以说是“对象”:取得将要上载文件的HtmlInputFile控件、保存文件名的TextBox控件、按钮Button控件。我们可以使用VS.NET的工具箱里的File Field来直接添加它(看,VS.NET充分考虑了我们的需求),并把它的Runat属性设为Server,来告诉程序“我要在服务器上运行它”。为了体会ASP.NET为我们带来的优势,我们使用服务器端Web控件:TextBox和Button。控件的布局如下:


图:控件布局
界面设计完成以后,我们需要进一步设置各个控件的属性,主要有控件的ID,TEXT等,这里需要强调的关键有两点:一是HtmlInputFile控件的runat值:server;另外一个是Form表单的enctype属性:multipart/form-data,以支持多部分MIME数据上载。FileUpload.ascx文件的html代码如下:
FileUp.ascx
<%@ Control Language="c#" AutoEventWireup="false" Codebehind="FileUp.ascx.cs" Inherits="WebApp.FileUp"%>

<HTML>
    <HEAD>
    </HEAD>
    <body>
        <!-- Add HTML Content and Server Controls. Do not add server
        <form>
        tags. -->
        <form enctype="multipart/form-data" runat=server method=post id=form1>
            <TABLE cellSpacing=1 cellPadding=1 width=400 border=0 height=151>
                <TR>
                    Selecte File To Upload:
                    <input type=file id=FileName runat="server" NAME="FileName"/>
                    </TD>
                </TR>
                <TR>
                    <TD style="HEIGHT: 27px">
                        Save The Name As:<asp:TextBox id=txtSaveName runat="server" Height="24px" Width="130px"></asp:TextBox></TD>
                </TR>
                <TR>
                    <TD valign=center align=right>
                        <asp:Button id=btnUplod runat="server" Text="Send File" height="24px" width="93px">
                        </asp:Button>  
                    </TD>
                </TR>
                <TR>
                    <TD valign=top>
                        <asp:Label id=lblStatusC runat="server" Height="33px" Width="383px">
                        </asp:Label>
                    </TD>
                </TR>
            </TABLE>
        </form>
    </body>
</HTML>
接下来,我们进行文件上载的处理工作。在.ascx页面上我们双击Button按钮,或者右键文件名FileUpload.ascx选择View Code,就可进入.ascs.cs文件,进行我们的编程工作。
ASP.NET为我们封装了丰富的编程接口,减少了编程的工作量。并且,我们不需要知道这些接口内部的工作原理,我们只要知道一个类的属性、方法等的用法就能进行快速的开发。
ASP.NET为我们提供了一个System.Web名字空间,System.Web名字空间提供了基于browser/server系统的类和接口。我们的文件上载控件就要使用其中的HttpPostedFile类,所以我们首先了解HttpPostedFile类的一些相关的属性和方法。
属性:
ContentLength    取得将要上载文件的字节数,也就是文件的大小
ContentType    客户端文件的MIME类型
FileName    上载文件的文件名
InputStream    建立一个Stream对象,指向将要读取文件的内容
方法:
GetType    取得当前实例的文件类型
SaveAs    把MIME消息体作为文件保存在服务器
ToString    返回当前对象的表现
熟悉以上的属性和方法后,我们就开始开发我们的文件上载控件。为了便于读者理解,我们首先看代码,完整代码如下:
FileUp.ascx.cs:
namespace WebApp
{
    using System;
    using System.IO;
    using System.Data;
    using System.Drawing;
    using System.Web;
    using System.Web.UI.WebControls;
    using System.Web.UI.HtmlControls;

    /// <summary>
    ///        Summary des cription for FileUp.
    /// </summary>
    public class FileUp : System.Web.UI.UserControl
    {
        protected System.Web.UI.WebControls.Button btnUplod;
        protected System.Web.UI.WebControls.Label lblStatusC;
        protected System.Web.UI.HtmlControls.HtmlInputFile FileName;
        protected System.Web.UI.WebControls.TextBox txtSaveName;
        protected string uploadFolder = "c:\temp\";

         /// <summary>
        ///        
        /// </summary>
        public FileUp()
        {
            this.Init += new System.EventHandler(Page_Init);
        }

        private void Page_Load(object sender, System.EventArgs e)
        {
            // Put user code to initialize the page here            
        }

        private void Page_Init(object sender, EventArgs e)
        {
            //
            // CODEGEN: This call is required by the ASP.NET Web Form Designer.
            //
            InitializeComponent();
        }

        #region Web Form Designer generated code
        ///        Required method for Designer support - do not modify
        ///        the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent()
        {
            this.btnUplod.Click += new System.EventHandler(this.btnUplod_Click);
            this.Load += new System.EventHandler(this.Page_Load);

        }
        #endregion

        private void btnUplod_Click(object sender, System.EventArgs e)
        {
            if (txtSaveName.Text.ToString() =="")
            {
                lblStatusC.Text = "没有选择另存为的文件名称";
                return;
            }   

            if (FileName.PostedFile != null)
            {
               
                string strFileInfo = "File Name: "+
                                     FileName.PostedFile.FileName +
                                     "File Type: "+
                                     FileName.PostedFile.ContentType +
                                      "File Length:"+
                                     FileName.PostedFile.ContentLength ;
                try
                {
                    FileName.PostedFile.SaveAs("uploadFolder"+txtSaveName.Text.ToString());
                    lblStatusC.Text = "File uploaded successfully:"+strFileInfo;                    
                }
                catch(Exception ee)
                {
                    lblStatusC.Text = "File uploaded error:"+ee.ToString();
                }
            }
        }
   
    }
}
让我们来逐行分析程序。
程序开始是一个名字空间的声明:namespace WebApp 这是系统根据项目自动生成的,我们可以手动更改它,或者删除它,但作者不建议删除名字空间,使用名字空间是一个良好的编程模式,便于以后的扩展工作。
    using System;
    using System.IO;
    using System.Data;
    using System.Drawing;
    using System.Web;
    using System.Web.UI.WebControls;
    using System.Web.UI.HtmlControls;
上面的代码为程序引入了我们需要的类,当然如果不怕以后麻烦也可以不首先引用,而在使用每个类时都写入名字空间。比如我们要使用刚才介绍的HttpPostedFile 类的PostedFile.SaveAs方法,我们就要这样写了:System.Web.UI.HtmlControls.PostedFile.SaveAs(),是不是很烦?
FileUp : System.Web.UI.UserControl
说明FileUp类继承了System.Web.UI.UserControl类。
        protected System.Web.UI.WebControls.Button btnUplod;
        protected System.Web.UI.WebControls.Label lblStatusC;
        protected System.Web.UI.HtmlControls.HtmlInputFile FileName;
        protected System.Web.UI.WebControls.TextBox txtSaveName;
        protected string uploadFolder = "c:\temp\";
上面的代码定义了btnUplod、lblStatusC等几个实例。
下面我们着重分析btnUplod_Click事件,当用户点击“Send File”按钮时程序调用该事件。
            if (txtSaveName.Text.ToString() =="")
            {
                lblStatusC.Text = "没有选择另存为的文件名称";
                return;
            }   
这里检验用户是否输入了将要保存的文件名,如果没有则返回。
    if (FileName.PostedFile != null)
            {
               
                string strFileInfo = "File Name: "+
                                     FileName.PostedFile.FileName +
                                     "File Type: "+
                                     FileName.PostedFile.ContentType +
                                      "File Length:"+
                                     FileName.PostedFile.ContentLength ;
                try
                {
                    FileName.PostedFile.SaveAs("uploadFolder"+txtSaveName.Text.ToString());
                    lblStatusC.Text = "File uploaded successfully:"+strFileInfo;                    
                }
                catch(Exception ee)
                {
                    lblStatusC.Text = "File uploaded error:"+ee.ToString();
                }
            }
这段代码在用户已选择了文件后才能执行,strFileInfo保存了文件的相关信息,读者可以看看HttpPostedFile类相关属性的使用。使用try{…}catch{…}监测程序,并输出错误信息,使用SaveAs方法将文件保存到服务器。
到现在为止,我们已成功的建立了一个文件上载控件。那么在别的.aspx程序中使用它呢?
使用自定义文件上载控件
使用任何的自定义控件我们都需要使用 Register 指令,相关用法这里就不做详细的介绍了,读者可以参考SDK熟悉它的用法。我们先看代码:
ControlTest.aspx:
<%@ Page language="c#" Codebehind="ControlTest.aspx.cs" AutoEventWireup="false" Inherits="WebApp.ControlTest" %>
<%@ Register TagPrefix="Test" TagName="FileUpload" Src="FileUp.ascx" %>

<HTML>
    <HEAD>
        <meta content="Microsoft Visual Studio 7.0" name=GENERATOR>
        <meta content=C# name=CODE_LANGUAGE>
        <meta content=Js cript name=vs_defaultClients cript>
        <meta content="Internet Explorer 5.0" name=vs_targetSchema>
    </HEAD>
    <body MS_POSITIONING="GridLayout">
        <Test:con runat="server" id=Con1>
        </Test:con>
    </body>
</HTML>
你看:
        <Test:con runat="server" id=FielUpload>
        </Test:con>
就这么简单!需要提示的是在<Test:con runat="server" id=FielUpload></Test:con>外面不能再有<form>标签了,否则不能编译成功。
好了,让我们看一下我们的执行结果吧!


图:执行结果
注:该程序在Win2000+SDK(2728)环境下测试通过