使用Gridview綁定數(shù)據(jù)庫中的圖片

注：此系列記錄在我實(shí)際開發(fā)中遇到的問題和收藏一些技巧文章。

我們都知道，在Gridview中不能直接去綁定數(shù)據(jù)庫中的圖片，我們可以利用HttpHandler很容易的完成這個任務(wù)，在這里我記錄一下這個過程。

1.上傳圖片存儲到數(shù)據(jù)庫中

在數(shù)據(jù)庫中創(chuàng)建一個表，添加一下3個字段：

步驟一：在Web頁面中拖一個FileUpload 控件，一個文本框用于輸入名稱和提交上傳按鈕

<asp:FileUpload ID="fuImage" runat="server" /><br />
<asp:TextBox ID="txtImageName" runat="server"/><br />
<asp:Button ID="btnUpload" runat="server" onClick="btnUpload_Click" Text="Upload" />

步驟二：在Web.Config文件內(nèi)配置連接字符串。

<add name="ConnectionString" connectionString="Data Source=.\SQLEXPRESS;
AttachDbFilename=|DataDirectory|\Image.mdf;Integrated Security=True;
User Instance=True" providerName="System.Data.SqlClient"/>

步驟三：把下面的代碼復(fù)制到上傳按鈕事件中。

protected void btnUpload_Click(object sender, EventArgs e)
{
     Stream imgStream = fuImage.PostedFile.InputStream;
     int imgLen = fuImage.PostedFile.ContentLength;
     string imgName = txtImageName.Text;
     byte[] imgBinaryData = new byte[imgLen];
     int n = imgStream.Read(imgBinaryData,0,imgLen);
 
     //use the web.config to store the connection string
     SqlConnection connection = new SqlConnection(ConfigurationManager.
     ConnectionStrings["connectionString"].ConnectionString);
     SqlCommand command = new SqlCommand("INSERT INTO Image (imagename,image)
      VALUES ( @img_name, @img_data)", connection);
 
     SqlParameter param0 = new SqlParameter("@img_name", SqlDbType.VarChar, 50);
     param0.Value = imgName;
     command.Parameters.Add(param0);
 
     SqlParameter param1 = new SqlParameter("@img_data", SqlDbType.Image);
     param1.Value = imgBinaryData;
     command.Parameters.Add(param1);
 
     connection.Open();
     int numRowsAffected = command.ExecuteNonQuery();
     connection.Close();
}

2.利用HttpHandler從數(shù)據(jù)庫中讀取圖片

創(chuàng)建一個名為ImageHandler.ashx的HttpHandler從數(shù)據(jù)庫中讀取圖片，通過imageID這個參數(shù)調(diào)用其方法顯示圖片。像這樣：ImageHandler.ashx?ImID=200

步驟四：書寫ImageHandler.ashx文件代碼如下：

public class ImageHandler : IHttpHandler
{
     public void ProcessRequest(HttpContext context)
     {
         string imageid = context.Request.QueryString["ImID"];
         SqlConnection connection = new SqlConnection(ConfigurationManager.
         ConnectionStrings["connectionString"].ConnectionString);
         connection.Open();
         SqlCommand command = new SqlCommand("select Image from Image where
         ImageID=" + imageid, connection);
         SqlDataReader dr = command.ExecuteReader();
         dr.Read();
         context.Response.BinaryWrite((Byte[])dr[0]);
         connection.Close();
         context.Response.End();
     }
 
     public bool IsReusable
     {
         get{return false;}
     }
}

3.綁定Gridview控件

步驟五：拖一個Gridview控件到頁面上，并將其命名為gvImages。用下面代碼來綁定數(shù)據(jù)。

SqlConnection connection = new SqlConnection(ConfigurationManager.
ConnectionStrings["connectionString"].ConnectionString);
SqlCommand command = new SqlCommand("SELECT imagename,ImageID
from [Image]", connection);
SqlDataAdapter ada = new SqlDataAdapter(command);
DataTable dt = new DataTable();
ada.Fill(dt);
gvImages.DataSource = dt;
gvImages.DataBind();

步驟六：設(shè)置Gridview控件的綁定列，其HTML代碼如下：

<asp:GridView Width="500px" ID="gvImages" runat="server"
                AutoGenerateColumns="False" >
     <Columns>
         <asp:BoundField HeaderText = "Image Name" DataField="imagename" />
         <asp:TemplateField HeaderText="Image">
          <ItemTemplate>
             <asp:Image ID="Image1" runat="server" 
             ImageUrl='<%# "ImageHandler.ashx?ImID="+ Eval("ImageID")  %>'/>
          </ItemTemplate>
     </asp:TemplateField>
     </Columns>
</asp:GridView>

4.上傳圖片，并顯示

OK！測試通過！還有其它一些顯示圖片的方法。但是我認(rèn)為這個比較簡單

作者：李永京（YJingLee's Blog）
出處：http://lyj.cnblogs.com