控件网：全网最全面的ASP.NET标准控件介绍及代码演示 2024-04-24 23:34:51 0 0 文章目录1. ASP.NET 页面处理事件1.1. 事件与生命周期1.2. 自动回发 IsPostBack属性2. 服务器控件2.1. HTML服务器控件2.2. WEB服务器控件3. 文本类型控件3.1. 标签 Label控件3.2. 文本框 TextBox控件4. 按钮类型控件4.1. 按钮 Button控件4.2. 图像按钮 ImageButton控件5. 链接类型控件5.1. 超链接 HyperLink控件5.2. 链接按钮 LinkButton控件6. 选择类型控件6.1. 单选按钮 RadioButton控件6.2. 单选按钮组 RadioButtonList控件6.3. 复选框 CheckBox控件6.4. 复选框组 CheckBoxList控件6.5. 列表项 ListBox控件6.6. 下拉选择列表 DropDownList控件7. 图像 Image控件8. 容器 Panel控件9. 文件上传 FileUpload控件 1. ASP.NET 页面处理事件 1.1. 事件与生命周期 一个ASP.NET页面有自己的生命周期，它的生命周期是通过按照一定的顺序执行相应的事件来进行控制的页面处理事件说明PreInit事件Prelnit事件是一个事件早期可以访问的页生命周期。在Prelnit 事件之后，如果有个性化设置信息和页面主题，则会进行加载Init事件当服务器控件初始化时执行，是其生命周期的第一步Load事件当服务器控件加载到Page对象时执行控件事件页面中的控件相应事件，例如Button控件的Click事件 1.2. 自动回发 IsPostBack属性 IsPostBack属性用于获取一个值，该值指示该页是否是Post回发(PostBack)的状态，简单点说就是判断当前页面的表单(form)请求是否是首次。IsPostBack只有在第一次请求的时候是false，其它时候都是true。 在ASP.NET框架内部有很多的场景需要判断IsPostBack，这是一个非常常用的属性。 语法：public bool IsPostBack(get;) 例如：// 在.aspx文件中添加一个Button，ID=Button1<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />// 在对应的.aspx.cs文件中添加如下判断语句：// 页面是第一次请求时Button1可点击// 页面非第一次请求时Button1不可点击protected void Page_Load(object sender, EventArgs e){ if (Page.IsPostBack) Button1.Enabled = false; else Button1.Enabled = true;} 运行效果如下图所示，左图为第一次请求，此时Button可点击；右图为非第一次请求，此时Button呈灰色，不可点击。 2. 服务器控件 2.1. HTML服务器控件 HTML服务器控件用于将传统ASP页面转换为ASP.NET页面，这类控件实质上是使用HTML元素对ASP.NET页面进行控制。 在Visual Studio IDE中，可以切换到.aspx文件，然后在工具箱->HTML里找到相应的HTML控件 例如如下HTML控件组合...<body> <form id="form1" runat="server"> <!-- 一个textarea --> <textarea id="TextArea1" rows="2"> </textarea> <div> <!-- 一个text --> <input id="Text1" type="text" /> <!-- 一个button --> <input id="Button1" type="button" value="button" /> </div> <div> <!-- 一个表单重置按钮 --> <input id="Reset1" type="reset" value="reset" /> <!-- 一个表单提交按钮 --> <input id="Submit1" type="submit" value="submit" /> </div> </form> </body>... 可以生成出这样的页面布局 2.2. WEB服务器控件 Web服务器控件是指在服务器上执行程序逻辑的组件，这个组件可以生成用户界面，也可以不包括用户界面。每个服务器控件都包含一些成员对象，以便开发人员调用，例如属性、事件、方法等。 在Visual Studio IDE中，可以切换到.aspx文件，然后在工具箱里找到相应控件，WEB服务器控件包括标准、数据、验证、导航、登录、WebParts、AJAX扩展、动态数据九项 3. 文本类型控件 3.1. 标签 Label控件 Label控件又可以叫做标签控件，主要是用来在浏览器上显示文本内容 在Visual Studio 2019 开发环境中，Label控件可以在工具箱->标准->Label找到 例如下例，在.apsx文件中给Label设置默认值"文本"，然后在.aspx.cs中动态地改变Label的值...// .aspx<body> <div> <!-- 一个label --> <asp:Label ID="Label1" runat="server" Text="文本"></asp:Label> </div></body>// .aspx.csprotected void Page_Load(object sender, EventArgs e){ Label1.Text = "ASP.NET文本标签";}... 运行时，Label1首先会显示"文本"，然后在执行到Page_Load()时会将Label1的值改变为"ASP.NET文本标签"，这是一个十分迅速的过程 3.2. 文本框 TextBox控件 在Web页面中，经常使用文本框控件(TextBox) 来接受用户的输入信息，包括文本、数字和日期等。 默认情况下，文本框控件是一个单行的文本框，用户只能输入一行内容，但是通过设置它的TextMode属性，可以将文本框改为允许输入多行文本或者输入密码等等形式。 例如...<body> <form id="form1" runat="server"> <div> <asp:Label ID="Label1" runat="server" Text="单行文本框"></asp:Label> <!-- 单行文本框 --> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> </div> <div> <asp:Label ID="Label2" runat="server" Text="多行文本框"></asp:Label> <!-- 多行文本框 --> <asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine"></asp:TextBox> </div> <div> <asp:Label ID="Label3" runat="server" Text="密码文本框"></asp:Label> <!-- 密码文本框 --> <asp:TextBox ID="TextBox3" runat="server" TextMode="Password"></asp:TextBox> </div> </form></body>... 效果如下图所示 4. 按钮类型控件 4.1. 按钮 Button控件 Button控件是一个命令按钮控件，可以将Web页面回送到服务器，也可以处理控件命令事件。Button控件最重要的是Click事件， 该事件在单击Button控件时发生。 例如，创建两个Button，"登录"和重置。// .aspx文件...<body> <form id="form1" runat="server" aria-live="off"> <div> <asp:Label ID="Label1" runat="server" Text="用户名"></asp:Label> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> </div> <div> <asp:Label ID="Label2" runat="server" Text="密码"></asp:Label> <asp:TextBox ID="TextBox2" runat="server" TextMode="Password"></asp:TextBox> </div> <div> <asp:Button ID="Button1" runat="server" Text="登录" OnClick="Button1_Click" /> <asp:Button ID="Button2" runat="server" Text="重置" OnClick="Button2_Click" /> </div> </form></body>...// .aspx.cs文件// 登录Button的Click事件protected void Button1_Click(object sender, EventArgs e){// 弹出窗口，提示登录成功 Response.Write("<script>alert('登录成功')</script>");}protected void Button2_Click(object sender, EventArgs e){// 将两个TextBox的内容置为空 TextBox1.Text = ""; TextBox2.Text = "";} 登录按钮的点击事件效果如下图所示 4.2. 图像按钮 ImageButton控件 ImageButton控件为图像按钮控件，它在功能上和Button控件相同，只是在呈现外观上表现为图像。 ImageButton的两个重要属性：lmageUrl属性，设置在ImageButton控件中显示的图像的地址PostBackUrl属性，设置单击ImageButton控件时从当前页发送到的网页的地址 因此在使用ImageButton控件时通常都需要两个网页，一个是当前页，一个是跳转到的页面 例如以下代码，ImageUrl="~/timg.jpg" PostBackUrl="~/WebForm2.aspx"，即会显示timg.jpg，点击后会跳转到WebForm2.aspx：...<body> <form id="form1" runat="server" aria-live="off"> <div> <asp:ImageButton ID="ImageButton1" runat="server" Height="51px" ImageUrl="~/timg.jpg" PostBackUrl="~/WebForm2.aspx" Width="51px" /> </div> </form></body>... 效果如下图所示 5. 链接类型控件 5.1. 超链接 HyperLink控件 HyperLink控件又称超链接控件，该控件在功能上和HTML的<a href="">元素相似。HyperLink控件与大多数Web服务器控件不同，当用户单击HyperLink控件时并不会在服务器代码中引发事件，它只实现导航功能。 它有三个主要属性：Text属性，设置HyperLink控件的文本标题NavigateURL属性，设置点击HyperLink控件链接到的urlTarget属性，设置单击HyperLink控件时链接到的Web页内容的框架，有_blank、_parent、search、_self、_top五个框架类型可供选择 例如下面的代码，NavigateUrl="~/WebForm2.aspx" Target="_self"，即点击时在自身窗口中打开WebForm2.aspx...<body> <form id="form1" runat="server" aria-live="off"> <div> <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/WebForm2.aspx" Target="_self">超链接</asp:HyperLink> </div> </form></body>... 效果如下所示 5.2. 链接按钮 LinkButton控件 LinkButton控件又称链接按钮控件，该控件在功能上与Button控件相似；但在呈现样式上与HperLink相似，LinkButton控件以超链接的形式显示。 它有一个主要属性和一个主要事件：PostBackURL属性，设置单击LinkButton控件时从当前页发送到的网页的URLClick事件，设置单击该超链接时发生的事件 例如下面的代码，OnClick="LinkButton1_Click" PostBackUrl="~/WebForm2.aspx"，即点击该LinkButton后，页面会跳转到WebForm2.aspx，并且执行LinkButton1_Click()函数的代码。// .aspx文件...<body> <form id="form1" runat="server" aria-live="off"> <div> <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click" PostBackUrl="~/WebForm2.aspx">链接按钮</asp:LinkButton> </div> </form></body>...// .aspx.cs文件protected void LinkButton1_Click(object sender, EventArgs e){ // 代码} 效果如下图所示： 6. 选择类型控件 6.1. 单选按钮 RadioButton控件 RadioButton控件是一种单选按钮控件，用户可以在页面中添加一组RadioButton控件，通过为所有的单选按钮分配相同的GroupName (组名) ，来强制执行从给出的所有选项集合中仅选择一个选项的功能。 它有两个主要属性和一个主要事件：Checked属性，判断单选按钮的选中状态GroupName属性，给单选按钮分组，同一个组的单选按钮，最多只能有一个处于选中状态CheckedChanged事件，响应单选按钮选中状态更改时的事件 例如下面的代码// .aspx文件...<body> <form id="form1" runat="server" aria-live="off"> <div><asp:Label ID="Label1" runat="server" Text="Label">选择用户登录角色</asp:Label></div> <div><asp:RadioButton ID="RadioButton1" runat="server" OnCheckedChanged="RadioButton1_CheckedChanged" Text="管理员" AutoPostBack="True" GroupName="role" /></div> <div><asp:RadioButton ID="RadioButton2" runat="server" OnCheckedChanged="RadioButton2_CheckedChanged" Text="教师" AutoPostBack="True" GroupName="role" /></div> <div><asp:RadioButton ID="RadioButton3" runat="server" OnCheckedChanged="RadioButton3_CheckedChanged" Text="学生" AutoPostBack="True" GroupName="role" /></div> <div><asp:RadioButton ID="RadioButton4" runat="server" OnCheckedChanged="RadioButton4_CheckedChanged" Text="游客" AutoPostBack="True" GroupName="role" /></div> <div> <asp:Label ID="Label2" runat="server" Text="你选择的角色是："></asp:Label> <asp:Label ID="Label3" runat="server"></asp:Label> </div> </form></body>...// .aspx.cs文件protected void RadioButton1_CheckedChanged(object sender, EventArgs e){ if (RadioButton1.Checked){ Label3.Text = RadioButton1.Text; }else { Label3.Text = ""; }}protected void RadioButton2_CheckedChanged(object sender, EventArgs e){ if (RadioButton2.Checked){ Label3.Text = RadioButton2.Text; }else{ Label3.Text = ""; }}protected void RadioButton3_CheckedChanged(object sender, EventArgs e){ if (RadioButton3.Checked){ Label3.Text = RadioButton3.Text; }else{ Label3.Text = ""; }}protected void RadioButton4_CheckedChanged(object sender, EventArgs e){ if (RadioButton4.Checked){ Label3.Text = RadioButton4.Text; }else{ Label3.Text = ""; }} 效果如图所示： 6.2. 单选按钮组 RadioButtonList控件 RadioButtonList控件表示封装的一组单选按钮控件的列表控件，可以简单的看做是自动分组的RadioButton。 它有两个主要属性和一个主要事件：ltems属性，获取列表控件项的集合SelectedIndex属性，获取选中项的索引位置SelectedIndexChanged事件，在单选按钮组中的选定或取消选定时触发 例如下面的代码// .apsx文件...<body> <form id="form1" runat="server" aria-live="off"> <div><asp:Label ID="Label1" runat="server" Text="Label">选择用户登录角色</asp:Label</div> <div> <asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged"> <asp:ListItem>管理员</asp:ListItem> <asp:ListItem>教师</asp:ListItem> <asp:ListItem>学生</asp:ListItem> <asp:ListItem>游客</asp:ListItem> </asp:RadioButtonList> </div> <div> <asp:Label ID="Label2" runat="server" Text="你选择的角色是："></asp:Label> <asp:Label ID="Label3" runat="server"></asp:Label> </div> </form></body>...// .aspx.cs文件protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e){ Label3.Text = RadioButtonList1.SelectedItem.Text;} 效果如图所示，与上图RadioButton效果一致： 6.3. 复选框 CheckBox控件 CheckBox控件用于在页面上创建复选框。如果将复选框分组，则可以使用这些复选框代表一系列不互斥的选项，并可以同时选择多个复选框。 它有一个主要属性和一个主要事件：Checked属性，指示是否已选中CheckBox控件CheckedChanged事件，响应复选框的选中状态更改事件 如下面代码：// .aspx文件...<body> <form id="form1" runat="server" aria-live="off"> <div> <asp:Label ID="Label1" runat="server" Text="Label">选择要买的书</asp:Label> </div> <div><asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="True" OnCheckedChanged="CheckBox1_CheckedChanged" Text="面向百度绝症治疗方案" /></div> <div><asp:CheckBox ID="CheckBox2" runat="server" AutoPostBack="True" OnCheckedChanged="CheckBox2_CheckedChanged" Text="家猪优选优育指南" /></div> <div><asp:CheckBox ID="CheckBox3" runat="server" AutoPostBack="True" OnCheckedChanged="CheckBox3_CheckedChanged" Text="知乎装逼宝典" /></div> <div><asp:CheckBox ID="CheckBox4" runat="server" AutoPostBack="True" OnCheckedChanged="CheckBox4_CheckedChanged" Text="微博喷子话术大全" /></div> <div> <asp:Label ID="Label2" runat="server" Text="你选择的角色是："></asp:Label> <asp:Label ID="Label3" runat="server"></asp:Label> </div> </form></body>...// .aspx.cs文件protected void CheckBox1_CheckedChanged(object sender, EventArgs e){ if (CheckBox1.Checked){ if (Label3.Text.IndexOf(CheckBox1.Text) < 0) { Label3.Text += (CheckBox1.Text + ";"); } }else { Label3.Text = Label3.Text.Replace(CheckBox1.Text + ";", ""); }}protected void CheckBox2_CheckedChanged(object sender, EventArgs e){ if (CheckBox2.Checked){ if (Label3.Text.IndexOf(CheckBox2.Text) < 0){ Label3.Text += (CheckBox2.Text + ";"); } }else{ Label3.Text = Label3.Text.Replace(CheckBox2.Text + ";", ""); }}protected void CheckBox3_CheckedChanged(object sender, EventArgs e){ if (CheckBox3.Checked){ if (Label3.Text.IndexOf(CheckBox3.Text) < 0){ Label3.Text += (CheckBox3.Text + ";"); } }else{ Label3.Text = Label3.Text.Replace(CheckBox3.Text + ";", ""); }}protected void CheckBox4_CheckedChanged(object sender, EventArgs e){ if (CheckBox4.Checked){ if (Label3.Text.IndexOf(CheckBox4.Text) < 0){ Label3.Text += (CheckBox4.Text + ";"); } }else{ Label3.Text = Label3.Text.Replace(CheckBox4.Text + ";", ""); }} 效果如图所示： 6.4. 复选框组 CheckBoxList控件 CheckBoxList控件表示封装的一组复选框控件的列表控件。 它有一个主要属性和一个主要事件ltems属性，列表控件项的集合SelectedindexChanged事件，在复选框中的选项选定或取消选定时触发 例如下面代码：// .aspx文件...<body> <form id="form1" runat="server" aria-live="off"> <div> <asp:Label ID="Label1" runat="server" Text="Label">选择要买的书</asp:Label> </div> <div> <asp:CheckBoxList ID="CheckBoxList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged"> <asp:ListItem>面向百度绝症治疗方案</asp:ListItem> <asp:ListItem>家猪优选优育指南</asp:ListItem> <asp:ListItem>知乎装逼宝典</asp:ListItem> <asp:ListItem>微博喷子话术大全</asp:ListItem> </asp:CheckBoxList> </div> <div> <asp:Label ID="Label2" runat="server" Text="你选择的书有："></asp:Label> <asp:Label ID="Label3" runat="server"></asp:Label> </div> </form></body>...// .aspx.cs文件protected void CheckBoxList1_SelectedIndexChanged(object sender, EventArgs e){ String books = ""; foreach (ListItem item in CheckBoxList1.Items) { if (item.Selected) { books += item.Text + ";"; } } Label3.Text = books;} 效果如图所示，与上图CheckBox效果一致： 6.5. 列表项 ListBox控件 ListBox控件用于显示一组列表项，用户可以从中选择一或多项， 如果列表项的总数超出可以显示的项数，那么ListBox控件会自动添加滚动条。 它有四个主要功能，通过2个方法和7个属性实现添加和移除项，Items属性的Add()方法和Remove()方法选择项，SelectedIndex、SelectedValue和Selectedltem属性选择多项，SelectionMode属性数据绑定，DataSource、DataTextField和DataValueField属性 例如下面代码，模拟了一个用户授权模块// .aspx文件...<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> div { display:inline; } </style></head><body> <form id="form1" runat="server" aria-live="off"> <div class="auto-style1"> <div style="float:left"> <!-- 一个ListBox --> <asp:ListBox ID="ListBox1" runat="server" Height="105px" Width="100px" AutoPostBack="True" SelectionMode="Multiple"></asp:ListBox> </div> <div style="float:left; text-align:center"> <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text=">" /><br /> <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="<" /> </div> <div style="float:left"> <!-- 一个ListBox --> <asp:ListBox ID="ListBox2" runat="server" Height="105px" Width="100px" AutoPostBack="True" SelectionMode="Multiple"></asp:ListBox> </div> </div> </form></body>...// .aspx.cs文件protected void Page_Load(object sender, EventArgs e){ if (!IsPostBack){ ListBox1.Items.Add("管理员"); ListBox1.Items.Add("教师"); ListBox1.Items.Add("学生"); ListBox1.Items.Add("游客");}} protected void Button1_Click(object sender, EventArgs e){ //获取列表框的选项数 int count = ListBox1.Items.Count; int index = 0; //循环判断各个项的选中状态 for (int i = 0; i < count; i++){ ListItem Item = ListBox1.Items[index]; //如果选项为选中状态从源列表框中删除并添加到目的列表框中 if (ListBox1.Items[index].Selected == true){ ListBox1.Items.Remove(Item); ListBox2.Items.Add(Item); //将当前选项索引值减1 index--; } //获取下一个选项的素引值 index++; } }protected void Button2_Click(object sender, EventArgs e){ //获取列表框的选项数 int count = ListBox2.Items.Count; int index = 0; //循环判断各个项的选中状态 for (int i = 0; i < count; i++){ ListItem Item = ListBox2.Items[index]; //如果选项为选中状态从源列表框中删除并添加到目的列表框中 if (ListBox2.Items[index].Selected == true){ ListBox2.Items.Remove(Item); ListBox1.Items.Add(Item); //将当前选项索引值减1 index--; } //获取下一个选项的素引值 index++; } } 效果如图所示 6.6. 下拉选择列表 DropDownList控件 DropDownList控件与ListBox控件的使用很类似，但是DropDownList控件只允许每次从列表中选择一项， 而且只在框中显示选定项。 它有一个主要事件：SelectedIndexChanged事件，在DropDownList中的选项选定时触发 例如下面的代码，实现了一个选择省份的功能// .aspx文件...<body><form id="form1" runat="server" aria-live="off"> <div> <asp:Label ID="Label1" runat="server" Text="Label">请选择所在省份</asp:Label> </div> <div> <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"> <asp:ListItem>湖北</asp:ListItem> <asp:ListItem>河南</asp:ListItem> <asp:ListItem>江西</asp:ListItem> <asp:ListItem>湖南</asp:ListItem> <asp:ListItem>安徽</asp:ListItem> </asp:DropDownList> <asp:Label ID="Label2" runat="server" Text="Label">所在省份:</asp:Label> <asp:Label ID="Label3" runat="server" Text=""></asp:Label> </div></form></body>...// .aspx.cs文件protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e){String province = DropDownList1.SelectedValue.ToString(); Label3.Text = province;} 效果如图所示： 7. 图像 Image控件 Image控件是一个基于HTML img元素的控件，主要用来在网页上显示图像。 它有三个常用属性：属性说明AlternateText设置当图像不可用时，Image控件中显示的替换文本ImageAlign设置Image控件相对于网页上其他元素的对齐方式ImageUrl设置Image控件所显示的图像的Url 例如下面代码，设置AlternateText为“图像描述”，这时，若图像没有加载出来，那就默认显示“图像描述”四个字：...<body> <form id="form1" runat="server" aria-live="off"> <div> <asp:Image ID="Image1" runat="server" AlternateText="图像描述" /> </div> </form></body>... 下面代码设置了ImageUrl，这时网页上显示该Image控件时，就会显示ImageURL关联的图像：...<body> <form id="form1" runat="server" aria-live="off"> <div> <asp:Image ID="Image1" runat="server" ImageUrl="~/timg.jpg" AlternateText="图像描述" Height="175px" Width="175px" /> </div> </form></body>... 下面代码将Image控件的ImageAlign设置为了Right(右对齐)，这时，图像会显示在浏览器的右端...<body> <form id="form1" runat="server" aria-live="off"> <div> <asp:Image ID="Image1" runat="server" ImageUrl="~/timg.jpg" ImageAlign="Right" AlternateText="图像描述" Height="175px" Width="175px" /> </div> </form></body>... 8. 容器 Panel控件 Panel控件是一个容器控件，它可以当作静态文本和其他控件的父级控件，用来把静态文本或其他控件装在里面。 它有两个主要属性：GroupingText属性，设置面板控件中包含的控件组的标题ScrollBars属性，设置Panel控件中滚动条的可见性和位置，有Horizontal、Vertical、Both、Auto、None五个枚举值可供选择，一般情况下使用Auto即可 例如下面的代码，将三个Label、三个TextBox和一个Button放在了一个Panel容器中：...<body> <form id="form1" runat="server"> <div> <!-- 一个panel容器 --> <asp:Panel ID="Panel1" runat="server" Height="150px" Width="215px" ScrollBars="Both"> <asp:Label ID="Label1" runat="server" Text="Label">用户名:</asp:Label> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <br /> <asp:Label ID="Label2" runat="server" Text="Label">密码：</asp:Label> <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> <br /> <asp:Label ID="Label3" runat="server" Text="Label">手机号：</asp:Label> <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox> <br /> <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="注册" /> </asp:Panel> </div> </form></body>... 效果如图所示，左图是一个足够大的panel容器，可以显示里面所有的控件；右图高度不够，因此会显示竖向的滚动条 9. 文件上传 FileUpload控件 FileUpload控件的主要功能是向指定目录上传文件，这个控件包括一个文本和一个浏览按钮。用户可以在文本框中输入完整的文件路径，或者通过“浏览按钮”浏览并选择需要上传的文件。 FileUpload控件不能自动上传文件，必须设置相关的事件处理程序，并在程序中实现文件上传。 它有四个主要属性和一个主要方法成员说明FileBytes属性获取上传文件的字节数组FileContent属性获取指向上传文件的Stream对象FileName属性获取上传文件在客户端的文件名称PostedFile属性获取一个用于上传文件的HttpPostedFile对象，这个对象可以获取上传的文件的相关属性SaveAs方法将文件保存到服务器上的指定路径下 如下例代码：// .aspx文件...<body> <form id="form1" runat="server"> <div> <asp:FileUpload ID="FileUpload1" runat="server" /> <asp:Button ID="Button1" runat="server" Text="文件上传" OnClick="Button1_Click1" /> </div> <div> <asp:Image ID="Image1" runat="server" /> </div> <div> <asp:Label ID="Label1" runat="server"></asp:Label> </div> </form></body>...// .aspx.cs文件protected void Button1_Click1(object sender, EventArgs e){ bool fileIsValid = false; //如果确认了上传文件，则判断文件类型是否符合要求 if (this.FileUpload1.HasFile){ //获取上传文件的后缀 String fileExtension = System.IO.Path.GetExtension(this.FileUpload1.FileName).ToLower(); String[] restrictExtension = { ".gif' ", ".jpg", ".bmp", ".png" }; //判断文件类型是否符合要求 for (int i = 0; i < restrictExtension.Length; i++){ if (fileExtension == restrictExtension[i]){ fileIsValid = true; } } //如果文件类型符合要求,调用SaveAs方法实现上传,并显示相关信息 if (fileIsValid == true){ try{ this.Image1.ImageUrl = "/images/" + FileUpload1.FileName; this.FileUpload1.SaveAs(Server.MapPath("~/images/") + FileUpload1.FileName); this.Label1.Text = "文件上传成功"; this.Label1.Text += "<Br/>"; this.Label1.Text += "<li>" + "原文件路径:" + this.FileUpload1.PostedFile.FileName; this.Label1.Text += "<Br/>"; this.Label1.Text += "<li>" + "文件大小:" + this.FileUpload1.PostedFile.ContentLength + "字节"; this.Label1.Text += "<Br/>"; this.Label1.Text += "<li>" + "文件类型:" + this.FileUpload1.PostedFile.ContentType; } catch (Exception ex) { this.Label1.Text = "无法上传文件" + ex.Message; } } }} 效果如下图，上图是原始状态，下图是已上传文件后的状态 收藏（0）