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

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

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

 其中在表中设计中添加了上传图片文件类型和文件大小(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>

 在页面From表单添加了一个属性-在页面Form中设置属性enctype -设置或获取表单的 MIME 编码

单一保存文件到数据库通用方法【注明:通用方法写在Button1_Click事件中-命名没有修改主要为了功能】 通用方法如下:

代码

 1         /// <summary>
 2         /// 上传文件同时并保存到数据中统一
 3         /// Author:chenkai Date:2010年2月2日16:24:29
 4         /// </summary>
 5         protected void Button1_Click(object sender, EventArgs e)
 6         {
 7             //获取数据
 8             string getname = this.markname.Text;
 9             string getfile = this.FileUpload1.PostedFile.FileName;
10 
11             //上传文件
12             string getlastpath = FileUploadCompant(this.FileUpload1);
13 
14             //获取上传文件流
15               byte[] getbyte=new byte[this.FileUpload1.PostedFile.ContentLength];
16               Stream filestream = this.FileUpload1.PostedFile.InputStream;
17              
18             //读入数据
19              filestream.Read(getbyte, 0, this.FileUpload1.PostedFile.ContentLength);
20 
21             //插入数据
22              #region
23              string sql = "insert into StoreImage(markname,markContent,markType,markSize,markLinkUrl) values(@name,@content,@type,@size,@link)";
24 
25              SqlParameter[] getpars = new SqlParameter[5];
26              getpars[0] = new SqlParameter("@name", getname);
27              getpars[1] = new SqlParameter("@content", getbyte);//文件内容插入This.Fileupload1.FileBytes同样可以直接转换成Byte数组不用转换
28              getpars[2] = new SqlParameter("@type", this.FileUpload1.PostedFile.ContentType);//保存文件类型
29              getpars[3] = new SqlParameter("@size", this.FileUpload1.PostedFile.ContentLength);//文件长度
30              getpars[4] = new SqlParameter("@link", getlastpath);
31 
32              int getrescount = DBUtility.SqlHelper.ExecuteNonQuery(DBUtility.SqlHelper.connString,CommandType.Text,sql,getpars);
33 
34              if (getrescount == 1)
35              {
36                  //添加成功
37                  ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "aler ", "alert( '图片记录成功添加到数据库'); ", true);
38              }
39              else
40              {
41                   //添加失败
42                  ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "aler ", "alert( '图片记录添加失败'); ", true);
43              }
44               
45              #endregion
46         }

 这种获得图片转换成Byte【】字节数组通用,注意:其中在Fileupload控件中有个GetBytes属性:This.Fileupload1.FileBytes可以直接把上传内容转换成字节数组而不必通过文件流来读取上传文件内容,这种方式更为快捷;如上图片成功保存到数据库 接下来就是如何读取和显示控制的问题:

(3)数据库存储图片的读取和显示控制:

从数据库中读取到字节流后把图片直接写入页面并对显示进行控制 读取方法如下【该方法下载Button2_Click中】:

代码

 1         /// <summary>
 2         /// 读取数据库中图片并显示出来
 3          /// Author:chenkai Date:2010年2月2日16:48:18
 4         /// </summary>
 5         protected void Button2_Click(object sender, EventArgs e)
 6         {
 7             //获得数据
 8             string sql = "select * from StoreImage order by id desc";
 9 
10              #region
11             using (SqlDataReader getreader = DBUtility.SqlHelper.ExecuteReader(DBUtility.SqlHelper.connString, CommandType.Text, sql))
12             {
13                 if (getreader != null&&getreader.HasRows)
14                 {
15                     //读取数据
16                     while (getreader.Read())
17                     {
18                         Response.ContentType = getreader["markType"] as string;
19                         Response.OutputStream.Write(getreader["markContent"] as byte[], 0, Convert.ToInt32(getreader["markSize"].ToString()));
20                         Response.End();
21                     }
22                 }
23             }
24              #endregion
25         }

 数据库中MarkType字段用来设置请求回发页面内容类型,获得字节流后把回发内容转换成输出流然后输出到当前页面,当然也可以直接使用Response.BinaryWrite()写入页面,图片自动显示.但是有人会说我想把它显示在页面一个Image控件中或是放到一个DIV层中这样实际需求. 这就是在实际需求对读取图片进行显示控制问题. 制作过验证码图片应该知道,验证码生成图片单独放在一个页面让后通过Image控件的ImageUrl来链接该页面,即可实现在Image控件控制,同理这种方式也是适用的: -添加了一个页面用来存储生成图片,详细代码如下:OutPutImageDemo页面后台编码:

代码

 1    //PageLoad事件中加载图片 并显示到OutPutImageDemo页面
 2    //Author：陈凯 Date:2010年2月3日10:28:17
 3    protected void Page_Load(object sender, EventArgs e)
 4         {
 5             if (!IsPostBack)
 6             {
 7                 //获得数据
 8                 string sql = "select * from StoreImage order by id desc";
 9 
10                 #region
11                 using (SqlDataReader getreader = DBUtility.SqlHelper.ExecuteReader(DBUtility.SqlHelper.connString, CommandType.Text, sql))
12                 {
13                     if (getreader != null && getreader.HasRows)
14                     {
15                         //读取数据
16                         while (getreader.Read())
17                         {
18                             Response.ContentType = getreader["markType"] as string;
19                             Response.OutputStream.Write(getreader["markContent"] as byte[], 0, Convert.ToInt32(getreader["markSize"].ToString()));
20                             Response.End();
21                         }
22                     }
23                 }
24                 #endregion
25             }
26         }

那么在TestImageStoreToDB.aspx页面中一个控件中获取该图片 只需设置图片的链接路径即可 代码如下:

1   this.Image1.ImageUrl = 

鲜花

握手

雷人

路过

鸡蛋

该文章已有0人参与评论

请发表评论

评论

全部评论