.Net实现图片上传，浏览，删除

来源：互联网发布：java常用框架有哪些编辑：程序博客网时间：2024/05/24 06:26

Html代码：

<div>    <asp:FileUpload ID="fuImage" runat="server"  /></div><div>    <asp:Button ID="btnUpload" runat="server" Text="上传" onclick="btnUpload_Click" /></div><div class="img_label">    <asp:Image ID="imgUploadImage1" Visible="false" runat="server" style="height:20px;width:20px" />    <asp:Button ID="button_ImgDelete1" runat="server" Text="删除"         onclick="button_ImgDelete1_Click" Visible="false" />    <asp:Image ID="imgUploadImage2" Visible="false" runat="server" style="height:20px;width:20px"/>    <asp:Button ID="button_ImgDelete2" runat="server" Text="删除"         onclick="button_ImgDelete2_Click" Visible="false" />    <asp:Image ID="imgUploadImage3" Visible="false" runat="server" style="height:20px;width:20px"/>    <asp:Button ID="button_ImgDelete3" runat="server" Text="删除"         onclick="button_ImgDelete3_Click" Visible="false" /></div><div id="outerDiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">    <div id="innerDiv" style="position:absolute;">        <img id="bigImg" style="border:5px solid #fff;" src="" />    </div></div>

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#代码：

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;        }    }

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

0 0