Asp.net中图片存储数据库以及页面读取显示通用方法详解

前端碰到对在一个系统遇到流程控制中需要存储在数据库存储一个签名图片的问题-一 直控制不好, 今天特别关于这个问题详细看了一下.其实这个问题网上资源还是相当多的, 但问题是过于凌乱 资料残缺不全 甚至我感觉其中有相当的一部分会对读者产生一些误导 .对于Asp.net中存储图片我在08年一月份就做了一个详细解决方案,今天在这个基础主要 对一些细节控制上以及页面显示上做了完善,详细步骤如下:

首先声明一下开发环境:VS2008+SQL2005数据库+.NET FrameWork 3.5版本

(1)存储图片ImageStore表数据库设计:

1　create　table　StoreImage
2　(
3　　　　id　int　not　null　 identity(1,1)　primary　key,
4　　　　markname　varchar(100)　not　null,-- 图片备注名称
5　　　　markContent　image　not　null,--文件内容
6　　　　 markType　varchar(100)　not　null,--保存文件类型　用于生成
7　　　　 markSize　int　not　null,--图片长度　读取数据用
8　　　　markLinkUrl　 varchar(1000)　not　null,--数据库路径
9　　　　markDate　datetime　not　 null　default(　getdate())--上传时间
10　)
11　go

其中在表中设计中添加了上传图片文件类型和文件大小(Byte[]字节大小),主要为了读 取时对图片显示进行控制.请参考后面编码说明.存储图片内容采用Image类型,SQL2005数 据容量为2G,对应C#中类型Byte[](字节数组),其中在设计中我还参考使用SQL中Binary类 型, 但是测试后发现Binary类型容量范围1-8000字节,对于图片容量太小, markLinkUrl为 了测试以图片路径方式存储并读取显示在页面这种方式 请参考后面详细说明.

(2)图片存储到数据库并单一读取:

图片存储:通过文件上传获取图片并转换成Byte[]字节数组,保存到数据库Image字段, 页面设计如下:

代码

1　<!--说面这是全部的页面代码:-->
2　　<form　id="form1" 　runat="server"　style="font-size:12px;"　enctype="multipart/form- data">
3
4　　　　　　备　注:<asp:TextBox　ID="markname"　 runat="server"></asp:TextBox>
5　　　　　　上　 传:<asp:FileUpload　ID="FileUpload1"　runat="server"　/>
6　　　　　 　<asp:Button　ID="Button1"　　　　runat="server"　　OnClientClick="return 　checkClint()"　　　Text="上　传"　　　　 onclick="Button1_Click"　/>
7
8　　　　　　<script　 language="javascript"　type="text/javascript">
9　　　　　　　　function 　checkClint()
10　　　　　　　　{
11　　　　　　　　　　var　 getmarkname=document.getElementById("markname");
12　　　　　　　　　　var 　getfile=document.getElementById("FileUpload1");
13
14　　　　　　　　 　　if(getmarkname.value=="")
15　　　　　　　　　　{
16　　　　　　　　 　　　　alert('请输入图片备注名称！');
17　　　　　　　　　　　　 getmarkname.focus();
18　　　　　　　　　　　　return　false;
19　　　　 　　　　　　}else　if(getfile.value=="")
20　　　　　　　　　　{
21　　 　　　　　　　　　　alert('请选择上传文件路径！');
22　　　　　　　　　　　 　getfile.focus();
23　　　　　　　　　　　　return　false;
24　　　　　 　　　　　}else
25　　　　　　　　　　{
26　　　　　　　　　　　　return 　true;
27　　　　　　　　　　}
28　　　　　　　　}
29　　　　　　 </script>
30　　　　　 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
31　　　　　　 <asp:Button　ID="Button2"　runat="server"　onclick="Button2_Click"　Text=" 读取图片"　/>
32
33　　　　　 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
34　　　　　　 <asp:Button　ID="Button3"　runat="server"　onclick="Button3_Click"　Text=" 读取到Image控件中"　/>
35　　　　　 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
36　　　　　　 <asp:Button　ID="Button5"　runat="server"　onclick="Button5_Click"　　　　 Text="存储链接方式获取图片"　/>
37　　　　　 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
38　 　　　　　<asp:Button　ID="Button4"　runat="server"　 onclick="Button4_Click"　Text="下载图片"　/>
39　　　　　　<br 　/>
40　　　　　　<br　/>
41　　　　　　<asp:Image　 ID="Image1"　runat="server"　/>
42　　　　　　<br　/>
43　　　 　　　图片路径方式读取:<br　/>
44　　　　　　服务器端:<asp:Image　 ID="Image2"　runat="server"　/>
45　　　　　　<br　/>
46　　　 　　　<asp:Label　ID="Label2"　runat="server"></asp:Label>
47　 　　　　　<br　/>
48　　　　　　客户端Img:<img　alt=""　　 runat="server"　id="clintimg"　/>
49　　　　　　<br　/>
50　　 　　　　<asp:Label　ID="Label1"　runat="server"></asp:Label>
51 　　　　　</form>