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


注:此系列记录在我实际开发中遇到的问题和收藏一些技巧文章。

  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(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!测试通过!还有其它一些显示图片的方法。但是我认为这个比较简单

本文作者:



相关阅读:
转换中文为unicode 转换unicode到正常文本
ASP连接数据库的全能代码
javascript复制对象使用说明
linux 磁盘配额 简单介绍
用JavaScript弹出一个接近全屏的窗口
IFRAME的属性参考手册
收藏的ASP常用的函数集
最佳的addEvent事件绑定是怎样诞生的
CSS 实现未知内容高度的垂直水平居中(改良版)
Windows下用命令行修改IP地址的方法详解(附批处理文件)
javascript 类型判断代码分析
高手闲谈Oracle索引扫描
CSS实例教程:永远在网页底部的网页布局
SQLSERVER查询所有数据库名,表名,和字段名的语句
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4