基于VS2010的上传文件控件

 web开发，或多或少要用到上传文件的控件即 FileUpload 控件。现在的UI做的绚丽多彩，如果要上传图片，多少都要添加另外的功能。根据项目的需求，做个一个上传图片的自定义控件。

功能很简单，就是点击上传的小图图片，弹出层，已大图的形式显示。

功能描述：1、上传图片

          2、小图显示图片

          3、点击小图，浏览大图。 

控件中使用了jquery 1.6脚本库。

在控件中添加了js代码。顺便记录下，在自定义控件中，封装JS，必须把js文件设置成嵌入的资源，即Embedded Resource。在自定义的项目中AssemblyInfo.cs文件中添加

[assembly: WebResource("UploadFile.publicjs.js", "text/javascript")] 。这个是必须的，要不然JS内容在自定义控件中找不到。


我再此自定义控件中使用的JS代码如下：

function Invoke() {
    var img = $("#uploadedImage");
    $("#addImg").attr("src", img.attr("src"));
}
$(document).ready(function () {
    //动画速度  
    var speed = 500;
    var imgDiv = $("#divPop");
    imgDiv.hide(); //默认隐藏
    var imgInfo = $("#uploadedImage");
    //绑定事件处理  
    $("#uploadedImage").click(function (event) {
        Invoke();
        //取消事件冒泡  
        event.stopPropagation();
        //设置弹出层位置  
        var offset = $(event.target).offset();
        $("#divPop")
            .css({ "position": "absolute" })
            .animate({
                "opacity": "show",
                "height": imgDiv.height() + "px",
                "width": imgDiv.width() + "px",
                "top": "100px",
                "left": "100px"
            },"show"); 
        //动画显示  
        $("#divPop").show(speed);
    });
    //单击空白区域隐藏弹出层  
    $(document).click(function (event) { $("#divPop").hide(speed) });
    //单击弹出层则自身隐藏  
    $("#divPop").click(function (event) { $("#divPop").hide(speed) });
 

自定义控件代码：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.IO;
using System.Text;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace UploadFile
{
    [DefaultProperty("UploadFile"), ToolboxData("<{0}:UploadFile runat=server></{0}:UploadFile>")] //自定控件 属性说明必不可少  而且属性名和类名必须一致
    public class UploadFile : WebControl, INamingContainer
    {
        #region 域定义        
        private string _btnName = "上传";

        private Unit _conlHeitht = new Unit(22);
        private Unit _conlWidth = new Unit(320);
        private Unit _btnWidth = new Unit(82);

        private string _formerlyName = ""; //上传文件原来文件名称
        private string _fileDownPath = ""; //要保存文件服务器上相对路径
        private string _fileNameLoaded = "";//上传后的文件名
        private string _fileType = "";
        private string _fileDir = "";
        private int _imgWidth = 30;
        private int _imgHeight = 30;
        private bool _imgVisible = false;
        private bool _enabled = true;

        private Unit _imgShowWidth = new Unit(30);
        private Unit _imgShowHeight = new Unit(30);

        private string _errorInfo = "";

        private FileUpload fileUpload = new FileUpload();//上传控件
        private Button _btnUpload = new Button();//上传按钮
        private Image _image = new Image();//上传后显示控件
        #endregion

        #region 构造方法
        public UploadFile()
        {
            this._btnUpload.ID = "btnUpload";
            this._btnUpload.Click += new EventHandler(this.btnUploadClick);

            this.fileUpload.ID = "fileUpload";
            this.fileUpload.Attributes.Add("onchange", "javascript:checkFileExpend();");

            this._image.ID = "uploadedImage";
            //this._image.Attributes.Add("ondblclick", "javascript:dbImage();");

            this.Controls.Add(this._btnUpload);//在自定义控件中添加控件
            this.Controls.Add(this.fileUpload);
            this.Controls.Add(this._image);
        }
        #endregion

        #region 方法重写	

        protected override void Render(System.Web.UI.HtmlTextWriter output)
        {
            this.SetControlProperty();//设置控件的属性
            this.RenderBeginTag(output);

            this.fileUpload.RenderControl(output);
            this._btnUpload.RenderControl(output);
            this._image.RenderControl(output);
            output.Write("<div id=\"divPop\" width=\"" + _imgShowWidth + "\" height=\"" + _imgShowHeight + "\" style=\"z-index: 9999\"><img id=\"addImg\" src=\"\"/>");
            output.Write("<iframe src=\"\" frameborder=\"0\" style=\"position:absolute;visibility:inherit;top:1px; left:1px;width:100%;height:100%;z-index:-1;filter= 'progid:DXImageTransform.Microsoft.Alpha(style=0,op acity=0)';\" width=\"" + _imgShowWidth + "\" height=\"" + _imgShowHeight + "\"></iframe>");
            output.Write("</div>"); //在自定义控件中输出弹出层

            this.RenderEndTag(output);
        }

        //将JS文件中的内容注册到自定义控件中

        protected override void OnPreRender(EventArgs e)
        {
            ClientScriptManager csm = this.Page.ClientScript;
            csm.RegisterClientScriptResource(typeof(UploadFile), "UploadFile.publicjs.js");
            string sc = ScriptContent();            
            csm.RegisterClientScriptBlock(this.GetType(), "checkexpend", sc, true);
            base.OnPreRender(e);
        }
        #endregion

        #region 控件添加属性和事件
        private void SetControlProperty()
        {
            this._btnUpload.Text = this._btnName;
            this._btnUpload.Height = this._conlHeitht;
            this._btnUpload.Enabled = false;
            this._btnUpload.Width = this._btnWidth;
            this.fileUpload.Width = this._conlWidth;
            this.fileUpload.Width = new Unit((this._conlWidth.Value - this._btnWidth.Value));

            this._image.Height = this._imgHeight;
            this._image.Width = this._imgWidth;
            this._image.Visible = this._imgVisible;
            this.fileUpload.Enabled = this._enabled;
            this._image.ToolTip = "单击查看大图";
        }

        public event EventHandler OnUploadClick;

        private void btnUploadClick(object sender, EventArgs e)
        {
            EventArgs args = new EventArgs();
            if (this.OnUploadClick != null)
            {
                SaveFile();
                this.OnUploadClick(this._btnUpload, args);
            }
        }
        #endregion

        #region 自定义方法
        private string ScriptContent()
        {
            StringBuilder strBuilder = new StringBuilder();
            
            strBuilder.Append("function checkFileExpend(){");
            strBuilder.Append("var fileObj = document.getElementById(\"fileUpload\");");
            strBuilder.Append("var btnObj = document.getElementById(\"btnUpload\");");
            strBuilder.Append("var v = fileObj.value;");
            strBuilder.Append("var strV = \"" + _fileType.ToLower() + "\";");
            strBuilder.Append("if(v!=\"\"){");
            strBuilder.Append("var tmpImg = document.getElementById(\"uploadedImage\");");
            strBuilder.Append("if(tmpImg!=null){");
            strBuilder.Append("tmpImg.src=\"\";tmpImg.style.display = \"none\";");
            strBuilder.Append("}");
            strBuilder.Append("var len = v.length;var idex = v.lastIndexOf('.');");
            strBuilder.Append("var exp = v.substr(idex+1,len-idex);");
            strBuilder.Append("var idx = strV.indexOf(exp.toLowerCase());");
            strBuilder.Append("if(idx== -1){");
            strBuilder.Append("btnObj.disabled = true;");
            strBuilder.Append("}else{");
            strBuilder.Append("btnObj.disabled = false;");
            strBuilder.Append("}}}");

            strBuilder.Append("function dbImage(){");
            strBuilder.Append("var tmpObj = confirm(\"确认要删除此图片？\");");
            strBuilder.Append("if(tmpObj){ alert(\"选择了删除\");");
            strBuilder.Append("}}");
            return strBuilder.ToString();
        }
        //保存文件
        private void SaveFile()
        {
            string fileName = "";
            bool res = CheckFile(out fileName);
            if (res)
            {
                this._fileNameLoaded = fileName;
                string relativePath = "";
                _fileDownPath = GeneranyDir(out relativePath) + "/" + fileName;
                this._image.ImageUrl = string.Format("{0}/{1}", relativePath, fileName);
                if (_fileDownPath.Length <= 250)
                {
                    this.fileUpload.SaveAs(_fileDownPath);
                    this._imgVisible = true;

                    ShowMessage("上传文件成功");
                }
                else
                {
                    ShowMessage("上传文件名太长");
                }
            }
            else
            {
                ShowMessage("上传文件格式不正确");
            }
        }
        //服务器绝对目录
        private string GeneranyDir(out string relativelyPath)
        {
            relativelyPath = "~/" + this._fileDir;
            //虚拟目录映射到绝对目录
            string serverPath = this.Page.Server.MapPath("~/" + this._fileDir + "/");
            if (!Directory.Exists(serverPath))
            {
                Directory.CreateDirectory(serverPath);
            }
            return serverPath;
        }
        //检查文件
        private bool CheckFile(out string fileName)
        {
            fileName = this.fileUpload.FileName;
            _formerlyName = this.fileUpload.FileName;
            bool isSuccess = false; 
            if (!string.IsNullOrEmpty(fileName))
            {
                int index = fileName.LastIndexOf('.');
                string fileExp = fileName.Substring(index+1);

                //生成新的文件名称
                string newFileName = Guid.NewGuid().ToString();
                fileName = string.Format("{0}.{1}", newFileName, fileExp);

                int idx = this._fileType.IndexOf(fileExp);
                //后缀名不匹配
                if (idx != -1)
                {
                    isSuccess= true;
                }
            }
            return isSuccess;
        }

        private void ShowMessage(string infomation)
        {
            string sc = string.Format("$(function(){0}alert('{1}');{2})", "{", infomation, "}");
            this.Page.ClientScript.RegisterStartupScript(this.Page.GetType(), "信息提示", sc, true);
        }
        #endregion

        #region 扩展属性  只写属性在控件可视化中不显示
        [Category("CustomProperty"),
        Description("设置按钮文本内容")]
        public string ButtonName
        {
            get
            {
                return this._btnName;
            }
            set
            {
                this._btnName = value;
            }
        }

        [Category("CustomProperty"),
        Description("设置控件的高度")]
        public Unit ControlHeight
        {
            get
            {
                return this._conlHeitht;
            }
            set
            {
                this._conlHeitht = value;
            }
        }

        [Category("CustomProperty"),
        Description("设置控件的宽度")]
        public Unit ControlWidth
        {
            get
            {
                return _conlWidth;
            }
            set
            {
                _conlWidth = value;
            }
        }
        [Category("CustomProperty"),
       Description("设置按钮的宽度")]
        public Unit ButtonWidth
        {
            get
            {
                return _btnWidth;
            }
            set
            {
                _btnWidth = value;
            }
        }

        [Category("FileExpend"),
        Description("只读属性,返回文件上传成功后文件绝对路径")]
        public string GetUploadedFilePath
        {
            get
            {
                return this._fileDownPath;
            }
        }
        [Category("FileExpend"),
        Description("文件扩展名格式,多个用逗号隔开jpg,jpeg,bmp等")]
        public string UpFileType
        {
            get
            {
                return _fileType;
            }
            set
            {
                _fileType = value;
            }
        }

        [Category("ErrorInfo"),
       Description("文件格式不正确,弹出框提示信息")]
        public string ErrorInfomation
        {
            get
            {
                return _errorInfo;
            }
            set
            {
                _errorInfo = value;
            }
        }

        [Category("FileExpend"),
       Description("上传文件存放的目录")]
        public string FileStoredDir
        {
            get
            {
                return this._fileDir;
            }
            set
            {
                _fileDir = value;
            }
        }

        [Category("FileExpend"),
       Description("只读属性 上传完成后的文件名称")]
        public string LoadedFileName
        {
            get
            {
                return _fileNameLoaded;
            }
        }

        [Category("FileExpend"),
       Description("只读属性 上传文件原来名称")]
        public string FormerlyFileName
        {
            get
            {
                return _formerlyName;
            }
        }

        [Category("ImageAttribute"),
        Description("设置图片的宽度")]
        public int ImageWidth
        {
            get
            {
                return this._imgWidth;
            }
            set
            {
                this._imgWidth = value;
            }
        }

        [Category("ImageAttribute"),
        Description("设置图片的宽度")]
        public int ImageHeight
        {
            get
            {
                return this._imgHeight;
            }
            set
            {
                this._imgHeight = value;
            }
        }

        [Category("ImageAttribute"),
        Description("是否显示图片")]
        public bool ImageVisible
        {
            get
            {
                return this._imgVisible;
            }
            set
            {
                this._imgVisible = value;
            }
        }

        [Category("ImageAttribute"),
        Description("设置图片相对路径")]
        public string ImageUrlPath
        {
            get
            {
                return _image.ImageUrl;
            }
            set
            {
                if (!string.IsNullOrEmpty(value))
                {
                    _imgVisible = true;
                    _image.ImageUrl = value;
                }
            }
        }

        [Category("ImageAttribute"),
        Description("浏览时图片宽度")]
        public Unit ImageShowWidth
        {
            get
            {
                return _imgShowWidth;
            }
            set
            {
                _imgShowWidth = value;
            }
        }

         [Category("ImageAttribute"),
        Description("浏览时图片高度")]
        public Unit ImageShowHeight
        {
            get
            {
                return _imgShowHeight;
            }
            set
            {
                _imgShowHeight = value;
            }
        }

        [Category("FileExpend"),
        Description("设置控件是否可用")]
         public bool UpEnabled
         {
             get
             {
                 return _enabled;
             }
             set
             {
                 _enabled = value;
             }
         }
        #endregion
    }
}

});  

UpFileType属性，这是要上传图片的格式，如果多种图用逗号隔开，例如：jpeg,jpg,bmp

控件默认上传按钮为灰色，如果选择的图片符合设置，上传按钮才可用使用。

点击上传，如果上传成功，提示信息，并显示图片。

点击小图，将弹出层，浏览大图。

点击弹出的层，或者其他空白地方，弹出的层自动隐藏。

总结：1、控件中使用了jquery框架，简化了很多js代码。而且弹出的层在IE6下，也可以遮挡下拉列表。其中使用了iframe。

     2、提供常用的设置属性，设置图片的存放路径、显示大小。

     3、提供外部方法，接受上传图片后的存放路径，和上传后图片的名称。

上传图片控件，只是项目中用到的一部分控件，其实在项目中，都把控件封装成自己需求的，也未尝不是件痛快事。加上校验规则，就可以成为公共控件，以后使用就方便多了。