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

Asp.net中图片存储数据库以及页面读取显示通用方法详解2011-03-26 博客园 chenkai前端碰到对在一个系统遇到流程控制中需要存储在数据库存储一个签名图片的问题-一直控制不好, 今天特别关于这个问题详细看了一下.其实这个问题网上资源还是相当多的, 但问题是过于凌乱资料残缺不全甚至我感觉其中有相当的一部分会对读者产生一些误导 .对于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>