这个控件就是对 cloudgamer 的 仿163网盘无刷新多文件上传系统 封装，使我们使用更加简单方便。
先来看效果：
<hxj:UploadControl ID="uploadfile" runat="server" MaxFileNumbers="5" AllowExtensions="jpg,gif" /> <asp:Button ID="Button1" runat="server" Text="上传" OnClick="Button1_Click" />
html的代码简单，设计时如下：
在设计时状态下并不好看，因为没有加载样式。
预览效果：
预览后加载了样式效果好看多了。
配合后台代码：
protected void Button1_Click(object sender, EventArgs e) { Hxj.Web.UploadFile uf = new Hxj.Web.UploadFile(); //设置路径 //uf.FilePath = "~/"; //上传文件信息 List<Hxj.Web.UploadFileInfo> filelist = uf.UploadAll(); }
文件很轻松就上传。
这里取消了原来无刷新上传功能。
下面讲述如何封装成Asp.Net Web控件。
首先建立一个类继承Control
[ToolboxData("<{0}:UploadControl runat=\"server\"></{0}:UploadControl>")] 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("<table border=\"0\" cellspacing=\"1\" class=\"fu_list\" id=\""); html.Append(this.ClientID); html.Append("\"><tbody><tr><td align=\"right\" width=\"15%\" style=\"line-height:35px;\">添加文件：</td><td><a href=\"javascript:void(0);\" class=\"files\" id=\""); html.Append(this.ClientID); html.Append("File\"></a> <img id=\""); html.Append(this.ClientID); html.Append("Process\" style=\"display:none;\" src=\"img/loading.gif\" /></td><td align=\"center\"><input type=\"button\" value=\"全部取消\" id=\""); html.Append(this.ClientID); html.Append("Btndel\" disabled=\"disabled\" /></td></tr><tr><td colspan=\"3\"><table border=\"0\" cellspacing=\"0\"><thead><tr><td>文件路径</td><td width=\"100\"></td></tr></thead><tbody id=\""); html.Append(this.ClientID); html.Append("FileList\"></tbody></table></td></tr>"); if (MaxFileNumbers > 0 || !IsAllowAll()) { html.Append("<tr><td colspan=\"3\" style=\"color:gray\">温馨提示："); if (MaxFileNumbers > 0) { html.Append("最多可同时上传 <b id=\""); html.Append(this.ClientID); html.Append("Limit\"></b> 个文件，"); } if (!IsAllowAll()) { html.Append("只允许上传 <b id=\""); html.Append(this.ClientID); html.Append("Ext\"></b> 文件。"); } html.Append("</td></tr>"); } html.Append("</tbody></table>"); writer.Write(html.ToString()); }
这样的写法比较乱，不是推荐的写法。
接下来就是引用脚本，引用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("<link href='", this.Page.ClientScript.GetWebResourceUrl(this.GetType(), "Hxj.Web.UI.css.fileupload.css"), "' rel='stylesheet' type='text/css' />"); 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([""<font color='gray'>没有添加文件</font>"", "" ""]); } 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的第一个参数的组成是程序集+路径+资源文件名。
这样一个控件就封装完毕了。
下载
