神马文学网Asp.Net Web控件 （一）（上传控件） - steven hu - 博客园
来源：百度文库 编辑：神马文学网 时间：2024/04/29 08:05:40
Asp.Net Web控件 （一）（上传控件）
这个控件就是对cloudgamer 的仿163网盘无刷新多文件上传系统 封装，使我们使用更加简单方便。
先来看效果：
html的代码简单，设计时如下：
在设计时状态下并不好看，因为没有加载样式。
预览效果：
预览后加载了样式效果好看多了。
配合后台代码：
protected void Button1_Click(object sender, EventArgs e){Hxj.Web.UploadFile uf = new Hxj.Web.UploadFile();//设置路径//uf.FilePath = "~/";//上传文件信息List filelist = uf.UploadAll();}
文件很轻松就上传。
这里取消了原来无刷新上传功能。
下面讲述如何封装成Asp.Net Web控件。
首先建立一个类继承Control
[ToolboxData("<{0}:UploadControl runat=\"server\">")]public class UploadControl : Control
在这个控件中有两个属性，一个是上传文件数量、另外一个是允许上传的文件类型，
如下：
[Category("Behavior")][DefaultValue(0)][Description("最多上传文件数 0表述无限制")]public int MaxFileNumbers{get{object s = ViewState["_MaxFileNumbers.Hxj.Web.UI.UploadControl"];int numbers = 0;if (null == s)return numbers;int.TryParse(s.ToString(), out numbers);if (numbers < 0)numbers = 0;return numbers;}set{ViewState["_MaxFileNumbers.Hxj.Web.UI.UploadControl"] = value;}}[Category("Behavior")][DefaultValue("*")][Description("允许上传的扩展名，用逗号隔开，所有文件请用 * ")]public string AllowExtensions{get{object extension = ViewState["_AllowExtensions.Hxj.Web.UI.UploadControl"];if (null == extension)return "*";return extension.ToString();}set{ViewState["_AllowExtensions.Hxj.Web.UI.UploadControl"] = value;}}
接下来是输出需要呈现的Html信息，在void Render(HtmlTextWriter writer)事件中输出Html，
代码如下：
protected override void Render(HtmlTextWriter writer){//验证该控件必须添加在 Form 表单中, 否则异常if (null != Page){Page.VerifyRenderingInServerForm(this);}StringBuilder html = new StringBuilder();html.Append("
这样的写法比较乱，不是推荐的写法。
接下来就是引用脚本，引用css，输出脚本，在void OnPreRender(EventArgs e)事件中完成。
代码如下：
protected override void OnPreRender(EventArgs e){this.Page.Form.Attributes.Remove("enctype");this.Page.Form.Attributes.Add("enctype", "multipart/form-data");if (!Page.ClientScript.IsClientScriptIncludeRegistered("UploadControlJS"))Page.ClientScript.RegisterClientScriptInclude("UploadControlJS", Page.ClientScript.GetWebResourceUrl(this.GetType(), "Hxj.Web.UI.js.fileupload.js"));string strCssLink = string.Concat("");string cssKey = "UploadControlCSS";if (Page.Header.FindControl(cssKey) == null){Literal ltlCss = new Literal();ltlCss.ID = cssKey;ltlCss.Text = strCssLink;this.Parent.Page.Header.Controls.Add(ltlCss);}StringBuilder script = new StringBuilder();script.AppendLine();script.Append("var ");script.Append(this.ClientID);script.Append("fu = new FileUpload(\"");script.Append(this.Page.Form.ClientID);script.Append("\", \"");script.Append(this.ClientID);script.Append("File\", { Limit:");if (MaxFileNumbers == 0){script.Append("9999");}else{script.Append(MaxFileNumbers.ToString());}script.Append(", ");if (!IsAllowAll()){script.Append(" ExtIn:[");string extensions = AllowExtensions;if (!string.IsNullOrEmpty(extensions)){StringBuilder extin = new StringBuilder();string[] exts = extensions.Split(',');foreach (string ext in exts){extin.Append(",");extin.Append("\"");extin.Append(ext);extin.Append("\"");}script.Append(extin.ToString().Substring(1));}script.AppendLine("],");}script.Append("FileName: \"");script.Append(this.ClientID);script.AppendLine("mf\",");script.AppendLine("onIniFile: function(file){ file.value ? file.style.display = \"none\" : this.Folder.removeChild(file); },");script.AppendLine("onEmpty: function(){ alert(\"请选择一个文件\"); },");script.AppendLine("onLimite: function(){ alert(\"最多只能同时上传\" + this.Limit + \"个文件\"); },");script.AppendLine("onSame: function(){ alert(\"已经有相同文件\"); },");script.AppendLine("onNotExtIn: function(){ alert(\"只允许上传\" + this.ExtIn.join(\"，\") + \"文件\"); },");script.AppendLine("onExtOut: function(){ alert(\"禁止上传\" + this.ExtOut.join(\"，\") + \"文件\"); },");script.AppendLine("onFail: function(file){ this.Folder.removeChild(file); },");script.Append(@"onIni: function(){var arrRows = [];if(this.Files.length){var oThis = this;Each(this.Files, function(o){var a = document.createElement(""a""); a.innerHTML = ""取消""; a.href = ""javascript:void(0);"";a.onclick = function(){ oThis.Delete(o); return false; };arrRows.push([o.value, a]);});} else { arrRows.push([""没有添加文件"", "" ""]); }AddList(arrRows,""");script.Append(this.ClientID);script.Append("FileList\");");script.Append(" $(\"");script.Append(this.ClientID);script.Append("Btndel\").disabled = this.Files.length <= 0;}});");if (MaxFileNumbers > 0){script.Append("$(\"");script.Append(this.ClientID);script.Append("Limit\").innerHTML = ");script.Append(this.ClientID);script.Append("fu.Limit;");}if (!IsAllowAll()){script.Append("$(\"");script.Append(this.ClientID);script.Append("Ext\").innerHTML = ");script.Append(this.ClientID);script.Append("fu.ExtIn.join(\"，\");");}script.Append("$(\"");script.Append(this.ClientID);script.Append("Btndel\").onclick = function(){ ");script.Append(this.ClientID);script.Append("fu.Clear(); }");if (!this.Page.ClientScript.IsStartupScriptRegistered("UploadControlStartscript"))this.Page.ClientScript.RegisterStartupScript(typeof(string), "UploadControlStartscript", script.ToString(), true);base.OnPreRender(e);}
当然还需资源文件的引用。
[assembly: WebResource("Hxj.Web.UI.js.fileupload.js", "text/javascript")][assembly: WebResource("Hxj.Web.UI.css.fileupload.css", "text/css", PerformSubstitution = true)][assembly: WebResource("Hxj.Web.UI.img.fu_btn.gif", "img/gif")]
其中PerformSubstitution 属性设置为true表示对其他资源文件有引用，这里是引用了Hxj.Web.UI.img.fu_btn.gif这个图片。
这里的WebResource的第一个参数的组成是程序集+路径+资源文件名。
这样一个控件就封装完毕了。
下载
作者：steven hu
出处：http://www.cnblogs.com/huxj
MSN:cn_huxj@hotmail.com
版权声明：欢迎任何网络媒体和网站转载本人博客的内容，只需注明作者和主博客文章地址的链接。另有约定者除外。
此声明随时可能修改，不另行通知。
评论快速通道：
Tag标签:Asp.Net,Control,Web控件,上传控件
steven hu
关注 - 5
粉丝 - 22
荣誉：微软社区精英关注博主
3
0
0(请您对文章做出评价)
« 上一篇：数据库组件 Hxj.Data （二十七）（字段组合更新）
» 下一篇：Asp.Net Web控件 （二）（无间隙滚动控件）
posted on 2010-04-17 18:20steven hu 阅读(1846)评论(13)编辑收藏 所属分类:.Net,Asp.Net
发表评论
1840448
回复 引用 查看
#1楼 2010-04-17 23:10 |空逸云
请问没做事件?上传的事件?难道上传还是在Form里指定一个handler?
回复 引用 查看
#2楼[楼主] 2010-04-18 12:30 |steven hu
@空逸云
没有事件，上传动作在页面中。
一般项目中也是文件和其他数据一起提交的。
回复 引用 查看
#3楼 2010-04-18 15:35 |My Blog Stude .net.
Hxj.Web.UploadFile 这个在哪个dll里面?
回复 引用 查看
#4楼[楼主] 2010-04-18 16:00 |steven hu
@My Blog Stude .net.
请重新去下载，在Hxj.Web下。
回复 引用 查看
#5楼 2010-04-19 09:31 |Lynn.
不错
等有时间去验证下
回复 引用 查看
#6楼[楼主] 2010-04-19 09:44 |steven hu
@Lynn.
谢谢支持
回复 引用 查看
#7楼 2010-04-19 15:49 |小龙3
uf.UploadAll();
如何获取上传全部文件的名称？
回复 引用 查看
#8楼[楼主] 2010-04-19 16:10 |steven hu
@小龙3
',1)">
1 List filelist = uf.UploadAll();
UploadFileInfo包含了包括文件名，扩展名，文件绝对路径，文件相对路径等信息，还包括上传文件的错误信息。
回复 引用 查看
#9楼 2010-04-22 23:38 |寻自己
太好了，最近就要做上传，感谢楼主的分享精神 ！！！！
已收藏
回复 引用 查看
#10楼[楼主] 2010-04-23 08:26 |steven hu
@寻自己
谢谢支持
回复 引用 查看
#11楼 2010-05-05 16:52 |you~you
不知道最大限制是多少？
回复 引用 查看
#12楼[楼主] 2010-05-05 17:07 |steven hu
@you~you
就是默认的上传控件
回复 引用 查看
#13楼 2010-06-04 11:10
这个控件就是对cloudgamer 的仿163网盘无刷新多文件上传系统 封装，使我们使用更加简单方便。
先来看效果：
html的代码简单，设计时如下：
在设计时状态下并不好看，因为没有加载样式。
预览效果：
预览后加载了样式效果好看多了。
配合后台代码：
protected void Button1_Click(object sender, EventArgs e){Hxj.Web.UploadFile uf = new Hxj.Web.UploadFile();//设置路径//uf.FilePath = "~/";//上传文件信息List
文件很轻松就上传。
这里取消了原来无刷新上传功能。
下面讲述如何封装成Asp.Net Web控件。
首先建立一个类继承Control
[ToolboxData("<{0}:UploadControl runat=\"server\">")]public class UploadControl : Control
在这个控件中有两个属性，一个是上传文件数量、另外一个是允许上传的文件类型，
如下：
[Category("Behavior")][DefaultValue(0)][Description("最多上传文件数 0表述无限制")]public int MaxFileNumbers{get{object s = ViewState["_MaxFileNumbers.Hxj.Web.UI.UploadControl"];int numbers = 0;if (null == s)return numbers;int.TryParse(s.ToString(), out numbers);if (numbers < 0)numbers = 0;return numbers;}set{ViewState["_MaxFileNumbers.Hxj.Web.UI.UploadControl"] = value;}}[Category("Behavior")][DefaultValue("*")][Description("允许上传的扩展名，用逗号隔开，所有文件请用 * ")]public string AllowExtensions{get{object extension = ViewState["_AllowExtensions.Hxj.Web.UI.UploadControl"];if (null == extension)return "*";return extension.ToString();}set{ViewState["_AllowExtensions.Hxj.Web.UI.UploadControl"] = value;}}
接下来是输出需要呈现的Html信息，在void Render(HtmlTextWriter writer)事件中输出Html，
代码如下：
protected override void Render(HtmlTextWriter writer){//验证该控件必须添加在 Form 表单中, 否则异常if (null != Page){Page.VerifyRenderingInServerForm(this);}StringBuilder html = new StringBuilder();html.Append("
![](\"img/loading.gif\")
这样的写法比较乱，不是推荐的写法。
接下来就是引用脚本，引用css，输出脚本，在void OnPreRender(EventArgs e)事件中完成。
代码如下：
protected override void OnPreRender(EventArgs e){this.Page.Form.Attributes.Remove("enctype");this.Page.Form.Attributes.Add("enctype", "multipart/form-data");if (!Page.ClientScript.IsClientScriptIncludeRegistered("UploadControlJS"))Page.ClientScript.RegisterClientScriptInclude("UploadControlJS", Page.ClientScript.GetWebResourceUrl(this.GetType(), "Hxj.Web.UI.js.fileupload.js"));string strCssLink = string.Concat("");string cssKey = "UploadControlCSS";if (Page.Header.FindControl(cssKey) == null){Literal ltlCss = new Literal();ltlCss.ID = cssKey;ltlCss.Text = strCssLink;this.Parent.Page.Header.Controls.Add(ltlCss);}StringBuilder script = new StringBuilder();script.AppendLine();script.Append("var ");script.Append(this.ClientID);script.Append("fu = new FileUpload(\"");script.Append(this.Page.Form.ClientID);script.Append("\", \"");script.Append(this.ClientID);script.Append("File\", { Limit:");if (MaxFileNumbers == 0){script.Append("9999");}else{script.Append(MaxFileNumbers.ToString());}script.Append(", ");if (!IsAllowAll()){script.Append(" ExtIn:[");string extensions = AllowExtensions;if (!string.IsNullOrEmpty(extensions)){StringBuilder extin = new StringBuilder();string[] exts = extensions.Split(',');foreach (string ext in exts){extin.Append(",");extin.Append("\"");extin.Append(ext);extin.Append("\"");}script.Append(extin.ToString().Substring(1));}script.AppendLine("],");}script.Append("FileName: \"");script.Append(this.ClientID);script.AppendLine("mf\",");script.AppendLine("onIniFile: function(file){ file.value ? file.style.display = \"none\" : this.Folder.removeChild(file); },");script.AppendLine("onEmpty: function(){ alert(\"请选择一个文件\"); },");script.AppendLine("onLimite: function(){ alert(\"最多只能同时上传\" + this.Limit + \"个文件\"); },");script.AppendLine("onSame: function(){ alert(\"已经有相同文件\"); },");script.AppendLine("onNotExtIn: function(){ alert(\"只允许上传\" + this.ExtIn.join(\"，\") + \"文件\"); },");script.AppendLine("onExtOut: function(){ alert(\"禁止上传\" + this.ExtOut.join(\"，\") + \"文件\"); },");script.AppendLine("onFail: function(file){ this.Folder.removeChild(file); },");script.Append(@"onIni: function(){var arrRows = [];if(this.Files.length){var oThis = this;Each(this.Files, function(o){var a = document.createElement(""a""); a.innerHTML = ""取消""; a.href = ""javascript:void(0);"";a.onclick = function(){ oThis.Delete(o); return false; };arrRows.push([o.value, a]);});} else { arrRows.push([""没有添加文件"", "" ""]); }AddList(arrRows,""");script.Append(this.ClientID);script.Append("FileList\");");script.Append(" $(\"");script.Append(this.ClientID);script.Append("Btndel\").disabled = this.Files.length <= 0;}});");if (MaxFileNumbers > 0){script.Append("$(\"");script.Append(this.ClientID);script.Append("Limit\").innerHTML = ");script.Append(this.ClientID);script.Append("fu.Limit;");}if (!IsAllowAll()){script.Append("$(\"");script.Append(this.ClientID);script.Append("Ext\").innerHTML = ");script.Append(this.ClientID);script.Append("fu.ExtIn.join(\"，\");");}script.Append("$(\"");script.Append(this.ClientID);script.Append("Btndel\").onclick = function(){ ");script.Append(this.ClientID);script.Append("fu.Clear(); }");if (!this.Page.ClientScript.IsStartupScriptRegistered("UploadControlStartscript"))this.Page.ClientScript.RegisterStartupScript(typeof(string), "UploadControlStartscript", script.ToString(), true);base.OnPreRender(e);}
当然还需资源文件的引用。
[assembly: WebResource("Hxj.Web.UI.js.fileupload.js", "text/javascript")][assembly: WebResource("Hxj.Web.UI.css.fileupload.css", "text/css", PerformSubstitution = true)][assembly: WebResource("Hxj.Web.UI.img.fu_btn.gif", "img/gif")]
其中PerformSubstitution 属性设置为true表示对其他资源文件有引用，这里是引用了Hxj.Web.UI.img.fu_btn.gif这个图片。
这里的WebResource的第一个参数的组成是程序集+路径+资源文件名。
这样一个控件就封装完毕了。
下载
作者：steven hu
出处：http://www.cnblogs.com/huxj
MSN:cn_huxj@hotmail.com
版权声明：欢迎任何网络媒体和网站转载本人博客的内容，只需注明作者和主博客文章地址的链接。另有约定者除外。
此声明随时可能修改，不另行通知。
评论快速通道：
Tag标签:Asp.Net,Control,Web控件,上传控件
steven hu关注 - 5
粉丝 - 22
荣誉：微软社区精英关注博主
3
0
0(请您对文章做出评价)
« 上一篇：数据库组件 Hxj.Data （二十七）（字段组合更新）
» 下一篇：Asp.Net Web控件 （二）（无间隙滚动控件）
posted on 2010-04-17 18:20steven hu 阅读(1846)评论(13)编辑收藏 所属分类:.Net,Asp.Net
发表评论
1840448
回复 引用 查看
#1楼 2010-04-17 23:10 |空逸云
请问没做事件?上传的事件?难道上传还是在Form里指定一个handler?
回复 引用 查看
#2楼[楼主] 2010-04-18 12:30 |steven hu
@空逸云
没有事件，上传动作在页面中。
一般项目中也是文件和其他数据一起提交的。
回复 引用 查看
#3楼 2010-04-18 15:35 |My Blog Stude .net.
Hxj.Web.UploadFile 这个在哪个dll里面?
回复 引用 查看
#4楼[楼主] 2010-04-18 16:00 |steven hu
@My Blog Stude .net.
请重新去下载，在Hxj.Web下。
回复 引用 查看
#5楼 2010-04-19 09:31 |Lynn.
不错
等有时间去验证下
回复 引用 查看
#6楼[楼主] 2010-04-19 09:44 |steven hu
@Lynn.
谢谢支持
回复 引用 查看
#7楼 2010-04-19 15:49 |小龙3
uf.UploadAll();
如何获取上传全部文件的名称？
回复 引用 查看
#8楼[楼主] 2010-04-19 16:10 |steven hu
@小龙3
',1)">
1 List
UploadFileInfo包含了包括文件名，扩展名，文件绝对路径，文件相对路径等信息，还包括上传文件的错误信息。
回复 引用 查看
#9楼 2010-04-22 23:38 |寻自己
太好了，最近就要做上传，感谢楼主的分享精神 ！！！！
已收藏
回复 引用 查看
#10楼[楼主] 2010-04-23 08:26 |steven hu
@寻自己
谢谢支持
回复 引用 查看
#11楼 2010-05-05 16:52 |you~you
不知道最大限制是多少？
回复 引用 查看
#12楼[楼主] 2010-05-05 17:07 |steven hu
@you~you
就是默认的上传控件
回复 引用 查看
#13楼 2010-06-04 11:10
Asp.Net Web控件 （一）（上传控件） - steven hu - 博客园
ASP.NET上传控件V1.0 beta2
MSPlus ToolBar&Menu WebControls DownLoad - MSPlus WebControls For ASP.NET. （服务器端控件） - 博客园
ASP.NET验证控件详解
上传控件 Xupload 2.1（新）
ASP.NET 2.0服务器控件开发之控件样式
ASP.NET 控件开发速成教程：生成复合控件
ASP.NET 2.0服务器控件之复合控件概述
ASP.NET 2.0服务器控件之复合控件事件
ASP.NET中TreeView控件使用小结
ASP.NET与JavaScript操作CheckBox控件
asp.net控件开发基础(2)
asp.net控件开发基础(3)
asp.net控件开发基础(4)
asp.net控件开发基础(15) 总结
asp.net 2.0教程 登录系列控件
ASP.NET 服务器控件的验证
ASP.NET六种验证控件
【C#控件】MenuStrip控件（菜单控件）
.NET全控件，经典！ - .NET全控件，经典！ - chiname - 博客园
vb.net控件、web service简述
asp.net常用的第三方控件 - shuanghusun的专栏 - CSDN博客
使用 ASP.NET Atlas PageNavigator控件实现客户端分页导航
ASP.NET技巧：將datagrid控件內容輸出到excel文件