利用FileUpload上傳Binary資料的圖片,存放在Image欄位型態的資料庫裡,並且結合ashx handler來瀏覽圖片

這篇文章主要介紹如何將上傳的檔案以Binary Data存放在資料庫裡....

並由ashx handler來將存放在資料庫的Binary Data呈現出來...

中間也用了一個GridView以列表方式..顯示資料庫裡所有的圖片資料...

並以ajax方式非同步更新Image的url .連到ashx handler檔案呈現圖片...

首先先規劃一個資料表...如下圖所示：

c#範例..分三個部分....

1.上傳圖片到資料庫

ImageToDB.aspx

ImageToDB.aspx.cs

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;

public partial class ImageToDB : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

}
    protected void Button1_Click(object sender, EventArgs e)
    {
        //判斷檔案是否存在
        if (this.FileUpload1.HasFile)
        {
            //取得副檔名
            string ExtName = System.IO.Path.GetExtension(this.FileUpload1.PostedFile.FileName).ToLower();
            string MIME = "";

switch (ExtName)
            {
                case  ".gif":
                    MIME = "image/gif";
                    break;
                case ".jpg":
                    MIME = "image/jpg";
                    break;
                case ".png":
                    MIME = "image/png";
                    break;
                default:
                    break;
            }

if (MIME != "")
            {
                //寫入資料庫
                using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["DatabaseConnectionString"].ConnectionString))
                {
                    string sql = "insert into [Image] ([MIMEType],[Alt],[Image]) values(@MIMEType,@Alt,@Image)";
                    SqlCommand cmd = new SqlCommand(sql, conn);
                    cmd.Parameters.Add("@MIMEType", SqlDbType.VarChar, 50).Value = MIME;
                    cmd.Parameters.Add("@Alt", SqlDbType.NVarChar, 50).Value = this.TextBox1.Text;
                    byte[] imagebyte = new byte[this.FileUpload1.PostedFile.InputStream.Length];
                    this.FileUpload1.PostedFile.InputStream.Read(imagebyte,0,imagebyte.Length);
                    cmd.Parameters.Add("@Image", SqlDbType.Image).Value = imagebyte;
                    conn.Open();
                    cmd.ExecuteNonQuery();
                }
            }
            else
            {
                this.Page.Form.Controls.Add(new LiteralControl("<script>alert('副檔名有誤!')</script>"));
            }
        }
    }
}

2.列表方式呈現資料庫的資料

ViewImage.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ViewImage.aspx.cs" Inherits="ViewImage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>ViewImage</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="id"
            DataSourceID="SqlDataSource1" Width="300px" OnRowCommand="GridView1_RowCommand">
            <Columns>
                <asp:BoundField DataField="id" HeaderText="id" InsertVisible="False" ReadOnly="True"
                    SortExpression="id" />
                <asp:BoundField DataField="MIMEType" HeaderText="MIMEType" SortExpression="MIMEType" />
                <asp:BoundField DataField="Alt" HeaderText="Alt" SortExpression="Alt" />
                <asp:TemplateField HeaderText="view">
                    <ItemTemplate>
                        <asp:Button ID="Button1" runat="server" CommandArgument='<%# Eval("id") %>' CommandName="btnView"
                            Text="view" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
                <asp:Image ID="Image1" runat="server" />
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString %>"
            SelectCommand="SELECT * FROM [Image]"></asp:SqlDataSource>
   
    </div>
    </form>
</body>
</html>

ViewImage.aspx.cs

3.顯示圖片的ashx檔

ImageShow.ashx

<%@ WebHandler Language="C#" Class="ImageShow" %>

using System;
using System.Web;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;

public class ImageShow : IHttpHandler {
   
    public void ProcessRequest (HttpContext context) {

int id = int.Parse(context.Request.QueryString["id"]);
        using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["DatabaseConnectionString"].ConnectionString))
        {
            string sql = "select * from [Image] where id=@id";
            SqlCommand cmd = new SqlCommand(sql, conn);
            cmd.Parameters.Add("@id", SqlDbType.Int).Value = id;
            conn.Open();
            SqlDataReader dr = cmd.ExecuteReader();
            if (dr.Read())
            {
                context.Response.ContentType = dr["MIMEType"].ToString();
                context.Response.BinaryWrite((byte[])dr["Image"]);
            }
            dr.Close();
        }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

執行結果：