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

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

1.上傳圖片存儲到數據庫中

在數據庫中創建一個表，添加一下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文件內配置連接字符串。

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

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

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 stringSqlConnection 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從數據庫中讀取圖片

創建一個名為ImageHandler.ashx的HttpHandler從數據庫中讀取圖片，通過imageID這個參數調用其方法顯示圖片。像這樣：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。用下面代碼來綁定數據。

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();

步驟六：設置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！測試通過！還有其它一些顯示圖片的方法。但是我認為這個比較簡單

總結

以上是生活随笔為你收集整理的使用Gridview绑定数据库中的图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。