Asp.Net Web控件（一）（上传控件）

这个控件就是对 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>"", ""&nbsp;""]); }
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的第一个参数的组成是程序集+路径+资源文件名。

这样一个控件就封装完毕了。

下载

posted on 2010-04-17 18:20 steven hu 阅读(7596) 评论(21) 编辑收藏举报

刷新页面返回顶部

Asp.Net Web控件 （一）（上传控件）

公告

Asp.Net Web控件（一）（上传控件）