Asp.Net自定义控件实现图片的上传，浏览，Delete功能

Js代码：

$(function () {
    /*
    *	针对上传文件按钮选择完文件判断是否选择合法文件
    */
    $("input[type=file]").change(function () {
        var fileName = $(this).val();
        var suffixRegExp = /\.jpg$|\.jpeg$|\.gif$|\.png$/i;
        if (suffixRegExp.test(fileName)) {
            $(this).next("img").attr("src", fileName);
        }
        else {
            $(this).val("");
            alert("允许上传图片格式:GIF|JPG|GIF|.");
        }
    });
    /*
    *	点击图片可以放大进行图片预览，再点击恢复
    */
    $("img[id*=UploadImage]").click(function () {
        $("#bigImg").attr("src", $(this).attr("src")).load(function () {
            var windowW = $(window).width();
            var windowH = $(window).height();
            var realWidth = this.width;
            var realHeight = this.height;
            var imgWidth, imgHeight, scale = 0.8;
            if (realHeight > windowH * scale) {
                imgHeight = windowH * scale;
                imgWidth = imgHeight / realHeight * realWidth;
                if (imgWidth > windowW * scale) {
                    imgWidth = windowW * scale;
                }
            }
            else if (realWidth > windowW * scale) {
                imgWidth = windowW * scale;
                imgHeight = imgWidth / realWidth * realHeight;
            }
            else {
                imgWidth = realWidth;
                imgHeight = realHeight;
            }
            $(this).width(imgWidth);
            $(this).height(imgHeight);
            var w = (windowW - imgWidth) / 2;
            var h = (windowH - imgHeight) / 2;
            $("#innerDiv").css({ "top": h, "left": w });
            $("#outerDiv").fadeIn("fast");
        });
    });
    /*
    *	再次点击放大的图层，使图层消失
    */
    $("#outerDiv").click(function () {
        $(this).fadeOut("fast");
    })

    /*
    *	点击上传按钮之前需要先判断是否选择了图片，如果选择的图片数量大于3，提示不能继续添加
    */
    $(btn_UploadImage).click(function () {
        var count = 0;
        $("div.img_label img[src*=Upload]").each(function () {
            if ($(this).attr("src") != null) {
                count++;
            }
        })
        if (count == 3) {
            alert("最多添加3张图片，如想继续添加，请先***图片");
            return false;
        }
    })    
}

C#代码：

怎么说呢？最初想的是用jQuery实现Delete这块的功能，Delete图片的思路其实就是给img的src属性赋空值，然后将其隐藏掉，但是不知道为什么当再次点击【上传】按钮的时候，后台又可以获取到删掉了的图片src属性的先前的值，这是让我百思不得其解的地方。不过有时候问题总会有那么一个点，很简单但是又很难让人注意到，我本来就是在后台靠判断img的url有无值，然后再给其赋值的，那么我Delete的时候就可以直接给想Delete的img赋空值啊，何必用jQuery呢？不知道我说的大伙儿能不能懂，就是当时的一个想法，结果导致迟迟解决不了这个问题。

另外想说说关于.Net自定义控件，感觉真的蛮实用的，其实我们在写的时候就把其当成普通控件就好，可以给其加一些控件属性，而这些控件属性其实就是这个自定义控件类的属性（成员参数）了，当然，我们还可以把它纯当作一个类，比如有数据库交互的时候，我们就可以在其内部写一个公开的Save方法，将控件内部的数据单独保存起来，当整个页面Save的时候，我们只要在适当的位置调用一个自定义控件的Save方法就OK了。

    public partial class ImageUploadControl : System.Web.UI.UserControl
    {
        private string _relativePath;
        private string _value = "$$##";

        public string Value
        {
            get { return _value; }
            set { _value = value; }
        }
        private BmsContextDataContext bcDataCXD = new BmsContextDataContext();

        private bool flag = false;//点击上传按钮时，如果给Image赋值，flag置true，说明此次上传结束，上传按钮点击一次只能给一个Image赋值
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {   
                Init();
            }
        }

        public void Init()
        {
            if (!string.IsNullOrEmpty(_value))
            {
                string[] sep = { "$$##" };
                string[] imgList = _value.Split(sep, StringSplitOptions.RemoveEmptyEntries);
                foreach (string img in imgList)
                {
                    if (string.IsNullOrEmpty(imgUploadImage1.ImageUrl))
                    {
                        imgUploadImage1.ImageUrl = img;
                        imgUploadImage1.Visible = true;
                        button_ImgDelete1.Visible = true;
                    }
                    else if (string.IsNullOrEmpty(imgUploadImage2.ImageUrl))
                    {
                        imgUploadImage2.ImageUrl = img;
                        imgUploadImage2.Visible = true;
                        button_ImgDelete2.Visible = true;
                    }
                    else if (string.IsNullOrEmpty(imgUploadImage3.ImageUrl))
                    {
                        imgUploadImage3.ImageUrl = img;
                        imgUploadImage3.Visible = true;
                        button_ImgDelete3.Visible = true;
                    }
                }
            }
        }

        public void Save()
        {
            _value = "$$##";
            if (!string.IsNullOrEmpty(imgUploadImage1.ImageUrl))
            {
                _value = _value + imgUploadImage1.ImageUrl + "$$##";
            }
            if (!string.IsNullOrEmpty(imgUploadImage2.ImageUrl))
            {
                _value = _value + imgUploadImage2.ImageUrl + "$$##";
            }
            if (!string.IsNullOrEmpty(imgUploadImage3.ImageUrl))
            {
                _value = _value + imgUploadImage3.ImageUrl + "$$##";
            }
        }

        protected void btnUpload_Click(object sender, EventArgs e)
        {
            //点击上传按钮,将图片加载到第一个未加载图片的Image控件上
            _relativePath = this.ImageUpload(fuImage);
            _value = "$$##";//每次点击上传按钮，都是对当前控件的状态进行遍历，重新进行组串

            if (string.IsNullOrEmpty(imgUploadImage1.ImageUrl) && !flag )
            {
                //当Image中无url，同时flag为false
                imgUploadImage1.ImageUrl = _relativePath;
                _value = _value + _relativePath + "$$##";
                imgUploadImage1.Visible = true;
                button_ImgDelete1.Visible = true;
                flag = true;
            }
            else
            {
                if (!string.IsNullOrEmpty(imgUploadImage1.ImageUrl))
                {
                    _value = _value + imgUploadImage1.ImageUrl + "$$##";
                }
            }
            if (string.IsNullOrEmpty(imgUploadImage2.ImageUrl) && !flag)
            {
                imgUploadImage2.ImageUrl = _relativePath;
                _value = _value + _relativePath + "$$##";
                imgUploadImage2.Visible = true;
                button_ImgDelete2.Visible = true;
                flag = true;
            }
            else
            {
                //加if是原因，如果是因为flag为true而进入这个分支，则判断Image的url是否为空
                if (!string.IsNullOrEmpty(imgUploadImage2.ImageUrl))
                {
                    _value = _value + imgUploadImage2.ImageUrl + "$$##";
                }
            }
            if (string.IsNullOrEmpty(imgUploadImage3.ImageUrl) && !flag)
            {
                imgUploadImage3.ImageUrl = _relativePath;
                _value = _value + _relativePath + "$$##";
                imgUploadImage3.Visible = true;
                button_ImgDelete3.Visible = true;
                flag = true;
            }
            else
            {
                if (!string.IsNullOrEmpty(imgUploadImage3.ImageUrl))
                {
                    _value = _value + imgUploadImage3.ImageUrl + "$$##";
                }
            }
        }

        private string ImageUpload(FileUpload fileUpload)
        {
            //如果FileUpload控件中有文件
            if (fileUpload.HasFile)
            {
                string timeStamp = DateTime.Now.Ticks.ToString();//时间戳
                string savePath = Server.MapPath("~/Upload/Images");//上传路径
                //如果不存在此路径,则创建一个新路径
                if (!Directory.Exists(savePath))
                {
                    Directory.CreateDirectory(savePath);
                }
                savePath = savePath + "\\" + timeStamp + "_" + fileUpload.FileName;//重组文件名,加上对应的时间戳
                fileUpload.SaveAs(savePath);//将图片上传到服务器
                return "/Upload/Images/" + timeStamp + "_" + fileUpload.FileName; //返回图片的名称,相对路径的
            }
            else
            {
                Utility.Show(this.Page, "未选择图片");
            }
            return null;
        }

        protected void button_ImgDelete1_Click(object sender, EventArgs e)
        {
            if (!string.IsNullOrEmpty(imgUploadImage2.ImageUrl))
            {
                imgUploadImage1.ImageUrl = imgUploadImage2.ImageUrl;
            }
            else
            {
                imgUploadImage1.ImageUrl = "";
                imgUploadImage1.Visible = false;
                button_ImgDelete1.Visible = false;
            }
            if (!string.IsNullOrEmpty(imgUploadImage3.ImageUrl))
            {
                imgUploadImage2.ImageUrl = imgUploadImage3.ImageUrl;
                imgUploadImage3.ImageUrl = "";
                imgUploadImage3.Visible = false;
                button_ImgDelete3.Visible = false;
            }
            else
            {
                imgUploadImage2.ImageUrl = "";
                imgUploadImage2.Visible = false;
                button_ImgDelete2.Visible = false;
            }
        }

        protected void button_ImgDelete2_Click(object sender, EventArgs e)
        {
            if (!string.IsNullOrEmpty(imgUploadImage3.ImageUrl))
            {
                imgUploadImage2.ImageUrl = imgUploadImage3.ImageUrl;
                imgUploadImage3.ImageUrl = "";
                imgUploadImage3.Visible = false;
                button_ImgDelete3.Visible = false;
            }
            else
            {
                imgUploadImage2.ImageUrl = "";
                imgUploadImage2.Visible = false;
                button_ImgDelete2.Visible = false;
            }
        }

        protected void button_ImgDelete3_Click(object sender, EventArgs e)
        {
            imgUploadImage3.ImageUrl = "";
            imgUploadImage3.Visible = false;
            button_ImgDelete3.Visible = false;
        }
    }

总结一下这次的控件开发，其实在写这种自定义控件的时候，实现某些功能，我们要尽量去琢磨用后台来直接实现，而不是上来就用js，最后弄的代码的功能实现极为分散，也容易将自己搞糊涂。总之就是一句话，上手之前一定要先计划好。

最后希望大家给予更多更好的建议，我会继续做扩展。也希望能有朋友给加上好看的样式，我们一起玩玩~

新浪微博：http://weibo.com/zhouhongyu1989 欢迎围观~！