2014-08-09 22:39:15|?次阅读|上传:huigezrx【已有?条评论】发表评论
关键词:ASP.NET, C#, 界面设计, Web|来源:唯设编程网
HTML页面比较简单,包含一个FileUpload控件,一个用来处理回调事件的Button控件,此外还包括两个显示提示信息的Label控件。下面再看看服务器端cs文件代码:
using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void BtnUpload_Click(object sender, EventArgs e) { bool fileOK = false; string path = Server.MapPath("~/Temp/"); if (FileUpload1.HasFile) { String fileExtension = System.IO.Path.GetExtension(FileUpload1.FileName).ToLower(); String[] allowedExtensions = { ".gif", ".png", ".bmp", ".jpg" }; for (int i = 0; i < allowedExtensions.Length; i++) { if (fileExtension == allowedExtensions[i]) { fileOK = true; } } } if (fileOK) { try { FileUpload1.SaveAs(path + FileUpload1.FileName); LabMessage1.Text = "文件上传成功."; LabMessage2.Text = "<b>原文件路径:</b>" + FileUpload1.PostedFile.FileName + "<br />" + "<b>文件大小:</b>" + FileUpload1.PostedFile.ContentLength + "字节<br />" + "<b>文件类型:</b>" + FileUpload1.PostedFile.ContentType + "<br />"; } catch (Exception ex) { LabMessage1.Text = "文件上传不成功."; } } else { LabMessage1.Text = "只能够上传图片文件."; } } }
通过Button控件的回调函数BtnUpload_Click处理文件上传,首先使用FileUpload的HasFile方法判断FileUpload控件是否包含上传文件,再判断文件类型是否符合要求,该例子仅仅允许上传后缀为.gif,.png,.bmp,.jpg的图片文件,如果文件类型符合要求,调用FileUpload的SaveAs方法将文件保存在指定的目录中。最后在提示标签中显示上传文件的相关信息。
通过对以上的示例进行分析,我们还可以用验证控件来实现对文件类型的验证,下面是一个使用验证控件的正则表达式:
<ASP:RegularExpressionValidator id="RegularExpressionValidator1" runat="server" ErrorMessage="Only mp3, m3u or mpeg files are allowed!" ValidationExpression="^(([a-zA-Z]:)|({2}w+)$?)((w[w].*)) +(.mp3|.MP3|.mpeg|.MPEG|.m3u|.M3U)$" ControlToValidate="FileUpload1"></ASP:RegularExpressionValidator> <br /> <ASP:RequiredFieldValidator id="RequiredFieldValidator1" runat="server" ErrorMessage="This is a required field!" ControlToValidate="FileUpload1"></ASP:RequiredFieldValidator>
到此,FileUpload控件的基本使用方法就介绍完成了,实际使用过程中,由于FileUpload的外观在各浏览器的展示风格不一致,所以通常我们都是将其隐藏,在页面中放置一个text和一个button控件组合,通过js触发FileUpload激活FileUpload对应的事件,以定义风格一致的用户界面,关于这部分内容,请参见:使用CSS定义input type=file的样式。