注:此係列記錄在我實際開發中遇到的問題和收藏一些技巧文章。
我們都知道,在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 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從數據庫中讀取圖片
創建一個名爲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(System.Configuration.ConfigurationManager. ConnectionStrings["connectionString"].ConnectionString); connection.Open(); SqlCommand command = new SqlCommand( "select Image from Image where ImageID=" + imageid, connection); SqlDataReader dr = command.ExecuteReader(); if (dr.Read())
{
if (!(dr[0]is DBNull))
{
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" Height="80px" Width="80px" ImageUrl='<%# "ImageHandler.ashx?ImID="+ Eval("ImageID") %>'/> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView>
4.上傳圖片,並顯示
OK!測試通過!還有其它一些顯示圖片的方法。但是我認爲這個比較簡單