当前位置:Gxlcms > 数据库问题 > 使用Gridview绑定数据库中的图片

使用Gridview绑定数据库中的图片

时间:2021-07-01 10:21:17 帮助过:4人阅读

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(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.上传图片,并显示

技术分享

版权声明:本文为博主http://www.zuiniusn.com原创文章,未经博主允许不得转载。

使用Gridview绑定数据库中的图片

标签:

人气教程排行