HtmlInputFile的改进：打造图片上传控件

　　通过继承HtmlInputFile控件，制作一个专门用于图片上传的控件。此控件可以限制上传图片的大小，并限制了只能上传图片格式的文件。
　　控件的原理是这样的：当控件选择文件时，关联的Img控件获得src并加载，加载完后得到文件的大小，并传给控件属性。

　　代码如下：

 1 using  System;
 2 using  System.Drawing;
 3 using  System.Drawing.Design;
 4 using  System.Web.UI;
 5 using  System.Web.UI.HtmlControls;
 6 using  System.Web.UI.WebControls;
 7 using  System.ComponentModel;
 8 using  System.ComponentModel.Design;
 9
10 namespace  FaibClass.WebControls
11 {
12    [ToolboxData("<{0}:ImageUploader runat=server></{0}:ImageUploader>")]
13    public class ImageUploader : HtmlInputFile
14    {
15        private int m_MaxSize = -1;
16
17        public ImageUploader()
18        {
19        }
20
21        [Category("Appearance")]
22        [DefaultValue(-1)]
23        [Description("限制上传的图片大小。")]
24        public int MaxSize
25        {
26            get{return m_MaxSize;}
27            set{m_MaxSize = value;}
28        }
29
30        protected override void OnPreRender(EventArgs e)
31        {
32            base.OnPreRender (e);
33            输出脚本#region 输出脚本
34            if(!Page.IsClientScriptBlockRegistered("ImageUploader"))
35            {
36                string str = @"
37<script>
38function FileUpload_SetSrc()
39{
40    document.getElementById(event.srcElement.id + '_img').src = event.srcElement.value;
41}
42function FileUpload_GetSize()
43{
44    var upload = document.getElementById(event.srcElement.uploadObject);
45    if(event.srcElement.fileSize == null || event.srcElement.fileSize == -1)
46    {
47        upload.fileSize = 0;
48        upload.checkSize = 0;
49    }
50    else
51    {
52        upload.fileSize = event.srcElement.fileSize;
53        if(upload.maxSize == -1)
54            upload.checkSize = 1;
55        else
56            upload.checkSize = upload.fileSize <= parseInt(upload.maxSize) ? 1 : 0;
57    }
58}
59</script>
60";
61                Page.RegisterClientScriptBlock("ImageUploader", str);
62            }
63            #endregion
64
65            //控件的内容改变时
66            this.Attributes.Add("onpropertychange", "if(event.propertyName == 'value')FileUpload_SetSrc()");
67            //添加文件大小属性
68            this.Attributes.Add("fileSize", "0");
69            //添加是否通过属性
70            this.Attributes.Add("checkSize", "0");
71            //添加文件最大大小属性
72            this.Attributes.Add("maxSize", m_MaxSize.ToString());
73        }
74
75        protected override void Render(System.Web.UI.HtmlTextWriter writer)
76        {
77            base.Render (writer);
78            //关联的上传控件域
79            writer.AddAttribute("uploadObject", this.ClientID);
80            //图片加载后获得图片大小
81            writer.AddAttribute("onpropertychange", "if(event.propertyName == 'src')FileUpload_GetSize()");
82            writer.AddAttribute(HtmlTextWriterAttribute.Id, this.ClientID + "_img");
83            writer.AddStyleAttribute("display", "block");
84            writer.AddStyleAttribute("display", "none");
85            writer.RenderBeginTag(HtmlTextWriterTag.Img);
86            writer.RenderEndTag();
87        }
88    }
89}

　　在客户端只需设定控件的MaxSize就可以了，然后在提交前通过控件的checkSize属性获知图片是否通过(Javascript)。

　　不知上传其他文件格式的文件如何获得文件的大小，希望大家给点意见。