Go homepage(回首页)
Upload pictures (上传图片)
Write articles (发文字帖)

The author:(作者)归海一刀
published in(发表于) 2014/1/30 1:00:08
ASP.NET技巧：使用Gridview绑定数据库中的图片_[Asp.Net教程]

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

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

我们都知道，在Gridview中不能直接去绑定数据库中的图片，我们可以利用HttpHandler很容易的完成这个任务，在这里我记录一下这个过程。

1.上传图片存储到数据库中

在数据库中创建一个表，添加一下3个字段：

步骤一：在Web页面中拖一个FileUpload 控件，一个文本框用于输入名称和提交上传按钮

onClick="btnUpload_Click" Text="Upload" />

步骤二：在Web.Config文件内配置连接字符串。

步骤三：把下面的代码复制到上传按钮事件中。

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代码如下：

AutoGenerateColumns="False" >




ImageUrl='<%# "ImageHandler.ashx?ImID="+ Eval("ImageID") %>'/>

4.上传图片，并显示

OK！测试通过！还有其它一些显示图片的方法。但是我认为这个比较简单

作者：李永京（YJingLee's Blog）
出处：http://lyj.cnblogs.com

赞