博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

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

Posted on 2007-04-10 14:37  faib  阅读(2691)  评论(7编辑  收藏  举报
  通过继承HtmlInputFile控件,制作一个专门用于图片上传的控件。此控件可以限制上传图片的大小,并限制了只能上传图片格式的文件。
  控件的原理是这样的:当控件选择文件时,关联的Img控件获得src并加载,加载完后得到文件的大小,并传给控件属性。

  代码如下:
 1using System;
 2using System.Drawing;
 3using System.Drawing.Design;
 4using System.Web.UI;
 5using System.Web.UI.HtmlControls;
 6using System.Web.UI.WebControls;
 7using System.ComponentModel;
 8using System.ComponentModel.Design;
 9
10namespace 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            输出脚本
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)。

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