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

最新推荐文章于 2019-11-28 21:36:34 发布
最新推荐文章于 2019-11-28 21:36:34 发布
阅读量425 收藏
点赞数
文章标签： javascript 数据库 ui ViewUI
原文链接：https://yq.aliyun.com/articles/478234
版权

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

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

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

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

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

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

1、初始状态

wKiom1OVWkjSo6JDAAAkYZJ9oU4472.jpg

2、选择文件

wKioL1OVWi6RXHPuAAIG4nxIohk964.jpg

3、上传图片

wKioL1OVWnGwza6aAABN_VAdutA115.jpg

4、查看图片

wKioL1OVWvrApI5uAAQ9cPEOSzQ882.jpg

5、Delete图片

wKiom1OVWsTgDaO4AABA3XzhCag260.jpg

6、重新添加

wKiom1OVWuLhYHuSAABLkAqoFqs703.jpg

7、提示情况

wKioL1OVWs-QJYUQAAA7WqJhkrk799.jpg

wKiom1OVWv2B564CAABHVzFx2Ns506.jpg

wKioL1OVWtDBOVeJAABRchcYfEI842.jpg

Html代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
< 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代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
$( 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了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
     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，最后弄的代码的功能实现极为分散，也容易将自己搞糊涂。总之就是一句话，上手之前一定要先计划好。

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










本文转自 我不会抽烟 51CTO博客，原文链接：http://blog.51cto.com/zhouhongyu1989/1423963，如需转载请自行联系原作者

weixin_33827965
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
图片预览系统(asp.net版).rar
07-08
随着浏览器安全性的提高，要实现图片预览也越来越困难。 不过群众的智慧是无限的，网上也有很多变通或先进的方法来实现。 在研究了各种预览方法后，作为总结，写了这个程序，跟大家一起分享。 上次写的简便无刷新文件上传系统最初的目的就是用来实现这个图片预览效果。 兼容：ie6/7/8, firefox 3.5.5 后台支持下还兼容：opera 10.10, safari 4.0.4, chrome 3.0
ASP.NET数据绑定之GridView控件
10-22
ASP.NET中的GridView控件是用于在Web页面上展示数据源中的数据的一种常见方式，它继承了DataGrid控件的功能，并且在.NET Framework 2.0之后成为主流选择。GridView不仅能够展示数据，还提供了丰富的编辑、排序、分页...
.net文件上传
01-07 101
一．接收上传文件 (1) FileUpLoad控件: 说明:用于用户向Web应用程序上传文件. 相关属性和方法 属性名 说明 Enable 用于禁用FileUpload控件 FileBytes 以字节数组形式获取上传文件内容 FileContent ...
在asp.net中能够浏览到图片在iis中浏览却看不到为什么？
chenhuizhouhb的专栏
04-19 2619
最近写了一个网站（没事瞎折腾）在datalist中添加了一个img空间属性src设置成src=大家都知道这是在banding数据库中的数据，当我右键点击选"在浏览器中查看"图片能够按照我的意思显示出来，可是打开iis服务在这里边浏览我该页面去显示一个红叉这让我很郁闷，上网查了半天也没解决（怎一个郁闷了得！）第二天我又看了看发现src属性没有加引号是不是他的问题呢！于是整个世界都清静了！应给
asp.net图片浏览器效果
weixin_30652491的博客
07-29 510
技术来源于同学会实践 前台设计 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="txh.aspx.cs" Inherits="txh" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &lt...
ASP.NET或者 js方式实现文件夹多图片浏览的方式
weixin_33697898的博客
02-26 124
1.JS方式，限制大，而且图片名称如果不规则的话会获取不全。 &lt;html&gt; &lt;head&gt; &lt;style&gt; img { max-width:1300px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id='temp'&gt; &lt;u
ASP.NET数据绑定GridView控件使用技巧
10-22
ASP.NET中的GridView控件是用于显示和操作数据库数据的一个强大工具。它允许开发者轻松地将数据源绑定到控件，并且提供了内置的编辑、删除和排序功能。在本篇文章中，我们将深入探讨如何利用GridView控件来显示和...
ASP.NET中repeater控件用法实例
01-20
总结来说，ASP.NET中的Repeater控件允许开发者自定义HTML输出，结合数据绑定功能，可以轻松地从数据库中动态生成复杂布局。通过处理命令事件，可以实现对数据的增删改查操作，提供了极大的灵活性和控制力。在实际...
ASP.NET数据绑定之DataList控件
10-22
ASP.NET中的DataList控件是一种数据绑定控件，它用于以表格形式展示数据，并提供了高度的自定义布局能力。DataList不同于其他简单的数据绑定控件，如Repeater，因为它提供了更多的功能，包括选择和编辑数据的能力。...
ASP.NET 2.0/3.5中直接操作Gridview控件插入新记录
10-30
在ASP.NET 2.0和3.5中，尽管Gridview控件是一个极其强大的数据展示工具，但它并不直接支持像FormView和DetailsView控件那样的插入新记录功能。这意味着开发者不能像在其他视图控件中那样简单地通过内置机制添加新...
ASP.NET图片浏览
07-15
在picture文件夹下放图片，运行程序，点击下一张、上一张浏览图片。
ASP.NET 图片预览
02-26
能够在asp.net上传后立即预览图片，针对部分浏览器有效
Asp.Net图片预览 支持多种浏览器
03-17
Asp.Net图片预览 支持多种浏览器(包括：IE 谷歌 火狐 Opera等)
基于ASP.NET与js模式的不同风格的图片浏览展示控件
09-17
基于ASP.NET与js模式的不同风格的图片浏览展示控件，提供了XML+JS模式，提供了ASP.NET+AJAX技术模式，也提供了纯js操作模式，也提供了后台数据库+AJAX技术模式实现图片的动态浏览与展示！！
Asp.net 的一个图像浏览控件
11-11
Asp.net 的一个图像浏览控件Asp.net 的一个图像浏览控件
ASP.NET预览本地图片（不用上传到服务器）
11-30 592
转：在浏览器里预览本地图片，正常情况下，firefox ,chrome 可以直接预览 本地图片 img.src ,单IE 里不行，因为img.src没有读取本地文件的权限。之前想过用 video、flash 控件等，现在发现一个好东西 ，IE 下 的滤镜也可以。不知道微软是怎么想的，img.src 读取不了 ，filter可以 。本身是是在网上找的 。 本文仅作个人收藏以便日后查阅，如有侵权请联
ASP.NET使用FileUpLoad控件实现图片上传并显示
pcdd's blog
11-28 7068
后端代码： using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.IO; namespace ex { public partial cla...
Asp.net中FileUpload控件实现图片上传并带预览显示
weixin_30940783的博客
09-18 677
单一图片上传——“选择”+“上传”，.NET默认模式: 1.实现原理： 采用FileUpload控件默认的使用方式，先由“选择”按钮选择图片，然后单击“上传”按钮完成上传，并可在“上传”按钮的单击事件中加载已上传图片。 2.关键代码： 页面代码： 1 <asp:FileUpload ID="FileUpload" runat="server" ...
ASP.NET控件上传图片
mrli113的专栏
11-18 5496
使用asp.net控件上传图片是一种比较简单的方式，直接在后台就可以得到图片流，并对流进行上传操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值