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

4月的时候公司比较闲，就想着自己做点东西，其实主要是为了更加熟悉.Net，毕竟接触的时间不长，趁着有时间想提高提高。不过当我做到图片上传这个功能的时候，就有些停滞不前了，连续写了两天也达不到自己想要的标准。后来公司来活，然后就没有然后了，然而做事总不能半途而废吧~时隔一个多月，趁着这个周末，我再次拾起了这个项目，而首要工作就是攻破这个图片上传控件。

下面说说我的标准是什么子的吧~

1、最多可以上传三张图片，超过三张有提示。

2、点击图片小图，有图片放大功能，再次点击，图片恢复原来尺寸。

3、在图片数量范围内，可对图片任意添加，删除。

看似都是很普通的功能吧，确实如此，只是对.Net自带的FileUpload进行了小小的扩展。不过我就是在第3条上遇到了问题，主要还是对页面刷新机制不了解和没有确定好实现的方法以及不太熟悉自定义控件，不过现在问题都解决了。在给大伙儿说说实现方法之前，先看看效果，没有美化，单看功能。

1、初始状态

2、选择文件

3、上传图片

4、查看图片

5、删除图片

6、重新添加

7、提示情况

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>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

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;

        }

    })

}

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

C#代码：

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

        }

    }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

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

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

Asp.Net 自定义控件实现图片的上传，浏览，删除功能,布布扣,bubuko.com

时间： 2024-12-16 08:35:29

Asp.Net 自定义控件实现图片的上传，浏览，删除功能的相关文章

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

4月的时候公司比较闲,就想着自己做点东西,其实主要是为了更加熟悉.Net,毕竟接触的时间不长,趁着有时间想提高提高.不过当我做到图片上传这个功能的时候,就有些停滞不前了,连续写了两天也达不到自己想要的标准.后来公司来活,然后就没有然后了,然而做事总不能半途而废吧~时隔一个多月,趁着这个周末,我再次拾起了这个项目,而首要工作就是攻破这个图片上传控件. 下面说说我的标准是什么子的吧~ 1.最多可以上传三张图片,超过三张有提示. 2.点击图片小图,有图片放大功能,再次点击,图片恢复原来尺寸. 3.在图

asp.net+swfupload 多图片批量上传(附源码下载)

asp.net的文件上传都是单个文件上传方式,无法执行一次性多张图片批量上传操作,要实现多图片批量上传需要借助于flash,通过flash选取多个图片(文件),然后再通过后端服务进行上传操作. 本次教程所使用的flash上传文件是 swfupload,下面会有源码下载链接. 使用工具 vs 2010. 演示效果图 第一步 新建一个web项目 第二步 引入所需swfuplod文件(swfupload.swf,js,css等) 第三步 新建一个一般处理程序(upload.ashx) upload.a

分布式网上商城项目-图片上传及删除功能错误

1.自己创建的jar包导入本地仓库引用后出现错误 1 [ERROR] [ERROR] Some problems were encountered while processing the POMs: 2 3 [WARNING] 'dependencies.dependency.(groupId:artifactId:type:classifier)' must be unique: org.apache.commons:commons-io:jar -> duplicate declarati

.Net Core 图片文件上传下载

当下.Net Core项目可是如雨后春笋一般发展起来,作为.Net大军中的一员,我热忱地拥抱了.Net Core并且积极使用其进行业务的开发,我们先介绍下.Net Core项目下实现文件上传下载接口. 一.开发环境 毋庸置疑,宇宙第一IDE VisualStudio 2017 二.项目结构 FilesController 文件上传下载控制器 PictureController 图片上传下载控制器 Return_Helper_DG 返回值帮助类 三.关键代码 1.首先我们来看Startup.cs

微信开发之调起摄像头、本地展示图片、上传下载图片

之前那篇微信JS-SDK授权的文章实现了分享接口,那么这里总结一下如何在微信里面通过js调起原生摄像头,以及上传下载图片. 1.配置 页面引入通过jssdk授权后,传入wx对象,首先配置需要的接口 wx.config({ /* debug: true, */ appId: appid, timestamp: timestamp, nonceStr: nonceStr, signature: signature, jsApiList: [ 'chooseImage',//拍照或从手机相册中选图接口

ASP.NET MVC图片管理(上传，预览与显示)

先看看效果(下面gif动画制作有点大,5.71MB): 题外话:上面选择图片来源于Insus.NET的新浪微博:http://weibo.com/104325017 也是昨晚(2015-07-03)Insus.NET烹饪的晚餐.如果你也想学习烹饪,也可以关注Insus.NET的微博. 言归正传,由于以前的asp.net mvc的练习文件上传文件,显示或是下载等博文,均是存储于站点目录之中.这次练习是把图片存储于数据库.也就是以图片的数据流存储.在上传时我们需要把文件处理为数据库,显示时,我们需要

Html5+asp.net mvc 图片压缩上传

在做图片上传时,大图片如果没有压缩直接上传时间会非常长,因为有的图片太大,传到服务器上再压缩太慢了,而且损耗流量. 思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法得到base64字符串来实现压缩. 废话不多少不多说直接看代码: 本次测试使用了 zepto.min.js 插件,更新版本的下载请点击这里 主要js代码: //图片压缩处理 ; (function () { /** * 加载的时候进行抽样检测 * 在iOS中,大于2M的图片会抽样渲染 */ func

ASP.NET(C#)实现一次性动态上传多张图片的代码（多个文件）

在做asp.net的Web开发的时候,我们经常会遇到一次性上传多个文件的需求.通常我们的解决方法是固定放多个上传文件框,这样的解决办法显然是不合理的,因为一次上传多个,就意味着数量不确定.因此我们就要让这些文件上传框动态添加,下面我以我做的一个图库管理中的上传图片的功能为例 默认是上传一个图片,但当我们点“增加图片”按钮时可以实现选择多个图片及其描述同时上传,本功能限制一次最多只能上传8张,且每张图片大小不超过1M,这个大家可根据实际情况更改! 第一步,使用javascript代码实现动态添加文

ASP.NET中扩展FileUpload的上传文件的容量

ASP.NET中扩展FileUpload只能上传小的文件,大小在4MB以内的.如果是上传大一点的图片类的可以在web.config里面扩展一下大小,代码如下 <system.web> <!--配置文件上传大小,该配置是上传文件的总大小不超过15MB==15360KB,缓存阈值改为100kB,这样可以上传稍微大一点的图片--> <httpRuntime maxRequestLength="15360" requestLengthDiskThreshold=&