前端碰到對在一個系統遇到流程控制中需要存儲在數據庫存儲一個簽名圖片的問題-一 直控制不好, 今天特別關於這個問題詳細看了一下.其實這個問題網上資源還是相當多的, 但問題是過於凌亂 資料殘缺不全 甚至我感覺其中有相當的一部分會對讀者產生一些誤導 .對於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
31 <asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text=" 讀取圖片" />
32
33
34 <asp:Button ID="Button3" runat="server" onclick="Button3_Click" Text=" 讀取到Image控件中" />
35
36 <asp:Button ID="Button5" runat="server" onclick="Button5_Click" Text="存儲鏈接方式獲取圖片" />
37
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>
