将SQL Server 2000数据库Image类型图片数据显示在页面上

一、建立数据表

-- ==================================
-- ==================================
-- TABLE NAME: E_PHOTO
-- AUTHOR:XIAOPENG CHENG
-- CREATE DATE: 2006-11-1
-- DESCRIPTION:SAVE PHTO INFORMATION
-- ==================================
-- ==================================

if   exists  ( select   *   from  sysobjects  where  id  =   object_id ( ' dbo.E_PHOTO ' ))
drop   table  dbo.E_PHOTO
GO
create   table   E_PHOTO
(
     USER_NAME   NVARCHAR ( 40 )  NOT   NULL ,     -- USER NAME
    PHOTO_TYPE_ID     int   NOT   NULL ,     -- PHOTO TYPE
    PHOTO_ID     NVARCHAR ( 30 )  NOT   NULL ,     -- PHOTO NAME
    PHOTO     IMAGE   NOT   NULL ,         -- PHOTO INFORMATION 
    PHOTO_DESC     NVARCHAR ( 3000 ),     -- PHOTO DESCRIPTION INFORMATION
    UPLOAD_DATE         SMALLDATETIME ,     -- UPLOAD DATE        
     CONSTRAINT  PHOTO  PRIMARY   KEY  ( USER_NAME ,PHOTO_ID,PHOTO_TYPE_ID)     -- PRIMARY KEY
)
GO

-- ==================================
-- ==================================
-- TABLE NAME: E_PHOTO_TYPE
-- AUTHOR:XIAOPENG CHENG
-- CREATE DATE: 2006-11-3
-- DESCRIPTION:SAVE PHTO TYPE INFORMATION
-- ==================================
-- ==================================

if   exists  ( select   *   from  sysobjects  where  id  =   object_id ( ' dbo.E_PHOTO_TYPE ' ))
drop   table  dbo.E_PHOTO_TYPE
GO
create   table   E_PHOTO_TYPE
(
     USER_NAME   NVARCHAR ( 40 )  NOT   NULL ,     -- USER NAME
    PHOTO_TYPE_CODE     int   identity ( 1 , 1 )  NOT   NULL ,     -- PHOTO TYPE CODE 
    PHOTO_TYPE_NAME     NVARCHAR ( 30 )  NOT   NULL ,     -- PHOTO TYPE NAME
    IF_USING     INT   DEFAULT   0 ,     -- IF USING //USING:0;NOT USING 1;
     CONSTRAINT  PHOTO_TYPE  PRIMARY   KEY ( USER_NAME ,PHOTO_TYPE_CODE)     -- PRIMARY KEY
)
GO

 二、建立页面，对图片类型进行分类
由于本人，在上传图片时，对图片进行了分类，因此当用户进行图片浏览的时候，对图片进行了分类，当用户单击“ALL Photo”时，将在另外的一个页面进行显示，以下是进行图片类型分类的HTML页面代码：

<% ... @ Page Language="C#" MasterPageFile="~/MasterPage2.master" AutoEventWireup="true"
    CodeFile="ListPhotoType.aspx.cs" Inherits="ListPhotoType" Title="List Photo Type"  %>

< asp:Content  ID ="Content1"  ContentPlaceHolderID ="ContentPlaceHolder1"  runat ="Server" >
     < strong > List The Photo Type: < br  />
     </ strong >
     < br  />
     < asp:BulletedList  ID ="BulletedList1"  runat ="server"  BulletStyle ="Numbered"  DisplayMode ="LinkButton"
        OnClick ="BulletedList1_Click" >
     </ asp:BulletedList >    
</ asp:Content >

从上面的代码，我们可以看出，我们用了模板页，在页面中，我们只用了一个BulletedList控件，显示的模式是用的连接an钮，列表的模式是用在左边有一些标题，在页面上有个对每一项都有一个单击事件发生。以下是此页面对应的后台编程页面：

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;

public   partial   class  ListPhotoType : System.Web.UI.Page
... {
    PhotoManage manage;
    protected void Page_Load(object sender, EventArgs e)
    ...{
        if(!(Convert.ToBoolean(Session["isLogin"])))
        ...{
            Response.Redirect("Login.aspx");
        }
        if(!Page.IsPostBack)
        ...{
            manage = new PhotoManage(Session["name"].ToString());
            this.BulletedList1.DataSource=manage.GetUserPhotoType(Session["name"].ToString());
            this.BulletedList1.DataTextField = "Photo_Type_Name";
            this.BulletedList1.DataValueField = "Photo_Type_Code";
            this.BulletedList1.DataBind();
            this.BulletedList1.Items.Insert(0, new ListItem("ALL Photo", "A"));
        }
    }
    protected void BulletedList1_Click(object sender, BulletedListEventArgs e)
    ...{
        string strURL=string.Format("ListPhoto.aspx?code={0}", Server.UrlEncode(this.BulletedList1.Items[e.Index].Value));
        //this.BulletedList1.Attributes.Add("onclick", string.Format("window.open('{0}','newwinow');",strURL));
        Response.Redirect(strURL);
    }
}

从此后台页面编程，我们可以看出，首先设置数据源，进行了数据绑定，可以让数据从数据库中读取， 显示在页面，为了将全部数据显示出来，我们在BulletedLista控件的第一个位置添加了"ALL Photo"，其中的值是“A”，在控件的单击事件中，我们将值取出，之后传递到ListPhoto.aspx页面进行处理。以下是ListPhoto.aspx页面的HTML代码：

<% ... @ Page Language="C#" MasterPageFile="~/MasterPage2.master" AutoEventWireup="true"
    CodeFile="ListPhoto.aspx.cs" Inherits="ListPhoto" Title="List Photo"  %>

< asp:Content  ID ="Content1"  ContentPlaceHolderID ="ContentPlaceHolder1"  runat ="Server" >
     < asp:DataList  ID ="dlPhoto"  runat ="server"  RepeatColumns ="4"  RepeatDirection ="Horizontal"
        CellPadding ="0"  Width ="790px"  OnItemCommand ="dlPhoto_ItemCommand"  OnItemDataBound ="dlPhoto_ItemDataBound" >
         < ItemTemplate >
             < asp:ImageButton  Width ="185"  ID ="ibtnPhoto"  ImageUrl ='<%#  FormatURL(DataBinder.Eval(Container,"DataItem.user_name"),DataBinder.Eval(Container, "DataItem.photo_type_id"),DataBinder.Eval(Container, "DataItem.photo_id")) % > '
                runat="server" AlternateText="click list Details information!" CommandName="Detail"
                CommandArgument="Detail" /> < br  />
             < asp:Label  ID ="lblPhotoType"  runat ="server"  Text ='<%#  DataBinder.Eval(Container, "DataItem.photo_type_id")% > '
                Visible="false"> </ asp:Label >< br  />
             < asp:Label  ID ="lblPhotoName"  runat ="server"  Text ='<%#  DataBinder.Eval(Container, "DataItem.photo_id")% > '
                Visible="false"> </ asp:Label >
         </ ItemTemplate >
     </ asp:DataList >
</ asp:Content >

  
       在此页面，我们可以看出，在此页面，我们只用了一个DataList控件，其中里面用了一个ImageButton用来显示图片，两个标签，一个是此种图片的类型，一个是图片的名称，我们可以从HMTL中我们可以看出，ImageButton控件的ImageUrl属性是通过调用一个函数实现的，里面传递了三个参数，都是通过绑定表达式，输入的。下面是两个标签，用来保存信息。下面的代码是，此页面对应的后台编程页面：

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;

public   partial   class  ListPhoto : System.Web.UI.Page
... {
    protected void Page_Load(object sender, EventArgs e)
    ...{
        if(!Page.IsPostBack)
        ...{
            if(!(Convert.ToBoolean(Session["isLogin"])))
            ...{
                Response.Redirect("Login.aspx");
            }
            else
            ...{
                System.Data.SqlClient.SqlConnection conn = new System.Data.SqlClient.SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["DogsManagerConnectionString"].ToString());
                string code,strSQL;
                code = Request.QueryString["code"].ToString();
                if(code == "A")
                ...{
                    strSQL = string.Format("select user_name,photo_type_id,photo_id,photo from E_Photo where user_name='{0}'", Session["name"].ToString());
                }
                else
                ...{
                    strSQL = string.Format("select user_name,photo_type_id,photo_id,photo from E_Photo where user_name='{0}' AND photo_type_id={1}", Session["name"].ToString(),code);
                }
                System.Data.SqlClient.SqlCommand cmd = new System.Data.SqlClient.SqlCommand(strSQL, conn);
                try
                ...{
                    conn.Open();
                    this.dlPhoto.DataSource = cmd.ExecuteReader(CommandBehavior.CloseConnection);
                    this.dlPhoto.DataBind();
                }
                catch(System.Data.SqlClient.SqlException sql)
                ...{
                    Response.Write("wrong information:<br>" + sql.Message);
                }
                finally
                ...{
                    cmd.Dispose();
                    conn.Close();
                }
            }
        }
    }

    protected string FormatURL(object userName, object typeID, object photoID)
    ...{
        return string.Format("ReadImage.aspx?userName={0}&typeID={1}&photoID={2}",
            userName.ToString(), typeID.ToString(), photoID.ToString());
    }
    protected void dlPhoto_ItemCommand(object source, DataListCommandEventArgs e)
    ...{
        if(e.CommandArgument.ToString() == "Detail")
        ...{
            string userName = Session["name"].ToString();
            string typeId = ((Label)e.Item.FindControl("lblPhotoType")).Text;
            string photoId = ((Label)e.Item.FindControl("lblPhotoName")).Text;
            ImageButton ibtnDetail = (ImageButton)e.Item.FindControl("ibtnPhoto");
            string Format = string.Format("ListPhotoDetail.aspx?userName={0}&typeID={1}&photoID={2}",
                userName, typeId, photoId);
            ibtnDetail.Click += new ImageClickEventHandler(ibtnDetail_Click);
        }
    }

    void ibtnDetail_Click(object sender, ImageClickEventArgs e)
    ...{
        Response.Redirect("http://www.baidu.com");
    }
    protected void dlPhoto_ItemDataBound(object sender, DataListItemEventArgs e)
    ...{
        //string userName = Session["name"].ToString();
        //string typeId = ((Label)e.Item.FindControl("lblPhotoType")).Text;
        //string photoId = ((Label)e.Item.FindControl("lblPhotoName")).Text;
        //ImageButton ibtnDetail = (ImageButton)e.Item.FindControl("ibtnPhoto");
        //string Format = string.Format("ListPhotoDetail.aspx?userName={0}&typeID={1}&photoID={2}",
        //    userName, typeId, photoId);
        //ibtnDetail.Attributes.Add("onclick", "Response.Write(" + Format + ")");
    }
}

此，后台代码也是比较的多的，在这些代码中，我们可以看到一个FormatURL函数，这和我们在HTML代码中看到的一致，用来将每绑定一个，定位到一个页面，将数据图片信息从数据库中读取出来。这个页面是ReadImage.aspx页面，这个过会再说。在这个后台编程页面中，我们在PageLoad中我们可以看到了我们把传递过来的参数code进行了判断，主要是使判断，是将某个类型的显示出来，还是将所有的显示出来，如果是"A",则是此用户的相关的所有图片信息显示出来，如果是其他，将此类的从数据库中读取，显示出来。读者可以看到，本人之所以用ImageButtonk控件，主要还是想实现另外一个功能，单击图片将此图片的详细信息显示出来，可以我还没有调出来，调出来后，再写吧。在此页面，主要工作是，当绑定一个时，调用FormatURL函数，跳转到ReadImage.aspx页面对图片读取，之后，一次类推。以下是：ReadImage.aspx页面的后台编程代码，此页面仅此作个处理，没有HTML代码了：

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;

public   partial   class  ReadImage : System.Web.UI.Page
... {
    protected void Page_Load(object sender, EventArgs e)
    ...{
        if (!Page.IsPostBack)
        ...{
            string username = Request.QueryString["userName"].ToString();
            string typeid = Request.QueryString["typeID"].ToString();
            string photoid = Request.QueryString["photoID"].ToString();

            System.Data.SqlClient.SqlConnection conn = new System.Data.SqlClient.SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["DogsManagerConnectionString"].ToString());
            string strSQL = string.Format("select photo from E_Photo where user_name='{0}' and photo_type_id=" +
                "{1} and photo_id='{2}'", username, typeid, photoid);
            System.Data.SqlClient.SqlCommand cmd = new System.Data.SqlClient.SqlCommand(strSQL, conn);
            try
            ...{
                conn.Open();
                System.Data.SqlClient.SqlDataReader reader = cmd.ExecuteReader(CommandBehavior.CloseConnection);
                if (reader.Read())
                ...{
                    Response.Clear();
                    Response.ContentType = "images/*";
                    Response.BinaryWrite((byte[])reader["photo"]);
                }
                conn.Close();
            }
            catch (System.Data.SqlClient.SqlException sql)
            ...{
                throw sql;
            }
            Response.End();
        }
    }
}

此页面，接受传递过来的三个参数，是为了准确定位一条记录，我们从数据表中，我们也就看到，这个表示三个联合主键，之后，进行读取，并且设置ContentType为“images/*”类型，之后输出。至此，我们的图片也就可以从数据库中读取出来了，并显示在页面上，但图片毕竟是从数据库中读取出来的，因此，有时我们会感觉，我们的图片显示的有点慢，但毕竟是一个一个从数据库中读取出来的，肯定是慢了点。以下几个页面时我测试用的读取的图片信息：

至此，我的从SQL Server 2000数据库中读取Image类型数据并显示在页面上，已经完成了， 其实，遇到问题，多上网查查，写程序，初级阶段就是比葫芦画瓢，这个方法，我也是从网上找到了。相信问题都可以解决的！