直播中
圖:添加用戶自定義控件
我們建立FileUpload.ascx文件后,就可以象布置.html頁面一樣來設(shè)置布局。我們這個項目是要建立一個用戶自定義的文件上載控件,在一個上載控件中有三個必備的元素,從某種意義上講也可以說是“對象”:取得將要上載文件的HtmlInputFile控件、保存文件名的TextBox控件、按鈕Button控件。我們可以使用VS.NET的工具箱里的File Field來直接添加它(看,VS.NET充分考慮了我們的需求),并把它的Runat屬性設(shè)為Server,來告訴程序“我要在服務(wù)器上運行它”。為了體會ASP.NET為我們帶來的優(yōu)勢,我們使用服務(wù)器端Web控件:TextBox和Button??丶牟季秩缦拢?/P>
圖:控件布局
界面設(shè)計完成以后,我們需要進(jìn)一步設(shè)置各個控件的屬性,主要有控件的ID,TEXT等,這里需要強調(diào)的關(guān)鍵有兩點:一是HtmlInputFile控件的runat值:server;另外一個是Form表單的enctype屬性:multipart/form-data,以支持多部分MIME數(shù)據(jù)上載。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>
接下來,我們進(jìn)行文件上載的處理工作。在.ascx頁面上我們雙擊Button按鈕,或者右鍵文件名FileUpload.ascx選擇View Code,就可進(jìn)入.ascs.cs文件,進(jìn)行我們的編程工作。
ASP.NET為我們封裝了豐富的編程接口,減少了編程的工作量。并且,我們不需要知道這些接口內(nèi)部的工作原理,我們只要知道一個類的屬性、方法等的用法就能進(jìn)行快速的開發(fā)。
ASP.NET為我們提供了一個System.Web名字空間,System.Web名字空間提供了基于browser/server系統(tǒng)的類和接口。我們的文件上載控件就要使用其中的HttpPostedFile類,所以我們首先了解HttpPostedFile類的一些相關(guān)的屬性和方法。
屬性:
ContentLength 取得將要上載文件的字節(jié)數(shù),也就是文件的大小
ContentType 客戶端文件的MIME類型
FileName 上載文件的文件名
InputStream 建立一個Stream對象,指向?qū)⒁x取文件的內(nèi)容
方法:
GetType 取得當(dāng)前實例的文件類型
SaveAs 把MIME消息體作為文件保存在服務(wù)器
ToString 返回當(dāng)前對象的表現(xiàn)
熟悉以上的屬性和方法后,我們就開始開發(fā)我們的文件上載控件。為了便于讀者理解,我們首先看代碼,完整代碼如下:
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 description 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 這是系統(tǒng)根據(jù)項目自動生成的,我們可以手動更改它,或者刪除它,但作者不建議刪除名字空間,使用名字空間是一個良好的編程模式,便于以后的擴展工作。
using System;
using System.IO;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
上面的代碼為程序引入了我們需要的類,當(dāng)然如果不怕以后麻煩也可以不首先引用,而在使用每個類時都寫入名字空間。比如我們要使用剛才介紹的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事件,當(dāng)用戶點擊“Send File”按鈕時程序調(diào)用該事件。
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();
}
}
這段代碼在用戶已選擇了文件后才能執(zhí)行,strFileInfo保存了文件的相關(guān)信息,讀者可以看看HttpPostedFile類相關(guān)屬性的使用。使用try{…}catch{…}監(jiān)測程序,并輸出錯誤信息,使用SaveAs方法將文件保存到服務(wù)器。
到現(xiàn)在為止,我們已成功的建立了一個文件上載控件。那么在別的.aspx程序中使用它呢?
使用自定義文件上載控件
使用任何的自定義控件我們都需要使用 Register 指令,相關(guān)用法這里就不做詳細(xì)的介紹了,讀者可以參考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=JScript name=vs_defaultClientScript>
<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>標(biāo)簽了,否則不能編譯成功。
好了,讓我們看一下我們的執(zhí)行結(jié)果吧!
圖:執(zhí)行結(jié)果
注:該程序在Win2000+SDK(2728)環(huán)境下測試通過