1.首先，在数据库中，创建存放图片的表:image. 把存放图片的字段类型设置为image类型；
2.添加新项，拖放FileUpload控件 与一个Button按钮，来实现图片上传；
拖放一个Label控件，来提示用户上传成功与否；
拖放GridView控件来显示图片；
3.接下来先实现图片上传的功能：
双击Button按钮，添加单击事件：
protected void Button1_Click(object sender, EventArgs e)
{
try
{
string ImgPath = FileUpload1.PostedFile.FileName; //获取FileUpload控件上的内容
string ImgName = ImgPath.Substring(ImgPath.LastIndexOf("\\") + 1); //获取图片文件名
string ImgExtend = ImgPath.Substring(ImgPath.LastIndexOf(".") + 1); //获取图片扩展名(图片类型)
if (!(ImgExtend == "bmp" || ImgExtend == "jpg" || ImgExtend == "gif")) //判断图片上传类型
{
Label1.Text = "上传格式不正确！";
return;
}
int FileLen = FileUpload1.PostedFile.ContentLength;
Byte[] FileData = new Byte[FileLen];
HttpPostedFile hp = FileUpload1.PostedFile;
Stream sr = hp.InputStream; //创建文件流
sr.Read(FileData, 0, FileLen);
SqlConnection con = new SqlConnection(constr); //连接数据库
string query = "insert into image (image_name) values (@imgdata)";
con.Open();
SqlCommand cmd = new SqlCommand(query, con);
cmd.Parameters.Add("@imgdata", SqlDbType.Image); //以参数化形式写入数据库
cmd.Parameters["@imgdata"].Value = FileData;
cmd.ExecuteNonQuery();
con.Close();
Label1.Text = "save!!";
GridView1.DataBind();
}
catch(Exception error)
{
Label1.Text = "处理失败！原因为：" + error.ToString();
}
}
//------------------------------------------------------------------------------------------------//
另外想说明的是：
有些人觉得图片二进制写进数据库太麻烦，可以直接把图片上传后放进项目下的 文件夹内！
然而获取的时候，不能通过Image控件来读取。
而只能通过img标签以 img中的src属性以：
<%# Eval("数据库中的图片文件名字段")%>绑定的形式来获取到图片！！
2.添加新项，拖放FileUpload控件 与一个Button按钮，来实现图片上传；
拖放一个Label控件，来提示用户上传成功与否；
拖放GridView控件来显示图片；
3.接下来先实现图片上传的功能：
双击Button按钮，添加单击事件：
protected void Button1_Click(object sender, EventArgs e) {
try {
string ImgPath = FileUpload1.PostedFile.FileName; //获取FileUpload控件上的内容 string ImgName = ImgPath.Substring(ImgPath.LastIndexOf("\\") + 1); //获取图片文件名 string ImgExtend = ImgPath.Substring(ImgPath.LastIndexOf(".") + 1); //获取图片扩展名(图片类型) if (!(ImgExtend == "bmp" || ImgExtend == "jpg" || ImgExtend == "gif")) //判断图片上传类型 { Label1.Text = "上传格式不正确！"; return; } int FileLen = FileUpload1.PostedFile.ContentLength; Byte[] FileData = new Byte[FileLen]; HttpPostedFile hp = FileUpload1.PostedFile; Stream sr = hp.InputStream; //创建文件流 sr.Read(FileData, 0, FileLen); SqlConnection con = new SqlConnection(constr); //连接数据库 string query = "insert into image (image_name) values (@imgdata)"; con.Open(); SqlCommand cmd = new SqlCommand(query, con); cmd.Parameters.Add("@imgdata", SqlDbType.Image); //以参数化形式写入数据库 cmd.Parameters["@imgdata"].Value = FileData; cmd.ExecuteNonQuery(); con.Close(); Label1.Text = "save!!"; GridView1.DataBind(); } catch(Exception error) { Label1.Text = "处理失败！原因为：" + error.ToString(); } }
到这里，图片以二进制流写入数据库的操作已经成功了！
接下来要实现的是，通过GridView控件 从数据库中读取图片。
4.在这之前，我们得先创建一个ashx文件来处理图片:
右击解决方案-》添加新项-》选择"一般处理程序" 并命名为GetImage.ashx.
打开GetImage.ashx文件，引入需要用到的命名空间：
using System.Configuration;
using System.IO;
using System.Drawing;
using System.Data.SqlClient;
using System.IO;
using System.Drawing;
using System.Data.SqlClient;
将GetImage.ashx文件中Hello World的代码注释：输入以下内容：
public void ProcessRequest (HttpContext context) {
//context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");
int ID = int.Parse(context.Request["id"].ToString());
string constr = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
MemoryStream stream = new MemoryStream();
SqlConnection conn = new SqlConnection(constr);
Bitmap bm = null;
Image image = null;
try
{
conn.Open();
SqlCommand cmd = new SqlCommand("select image_name from image where image_id='" + ID + "'", conn);
byte[] blob = (byte[])cmd.ExecuteScalar();
context.Response.ContentType = "image/gif";
context.Response.BinaryWrite(blob);
context.Response.End();
#region
stream.Write(blob, 78, blob.Length - 78);
bm = new Bitmap(stream);
int width = 48;
int height = (int)(width * ((double)bm.Height / (double)bm.Width));
// getthumbnailimage生成缩略图
image = bm.GetThumbnailImage(width, height, null, IntPtr.Zero);
context.Response.ContentType= "image/jpeg";
image.Save(context.Response.OutputStream,System.Drawing.Imaging.ImageFormat.Jpeg);
#endregion
}
catch (Exception ex)
{
//throw new Exception(ex.Message);
}
finally
{
if (image != null)
image.Dispose();
if (bm != null)
bm.Dispose();
stream.Close();
conn.Close();
}
}
//context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");
int ID = int.Parse(context.Request["id"].ToString());
string constr = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
MemoryStream stream = new MemoryStream();
SqlConnection conn = new SqlConnection(constr);
Bitmap bm = null;
Image image = null;
try
{
conn.Open();
SqlCommand cmd = new SqlCommand("select image_name from image where image_id='" + ID + "'", conn);
byte[] blob = (byte[])cmd.ExecuteScalar();
context.Response.ContentType = "image/gif";
context.Response.BinaryWrite(blob);
context.Response.End();
#region
stream.Write(blob, 78, blob.Length - 78);
bm = new Bitmap(stream);
int width = 48;
int height = (int)(width * ((double)bm.Height / (double)bm.Width));
// getthumbnailimage生成缩略图
image = bm.GetThumbnailImage(width, height, null, IntPtr.Zero);
context.Response.ContentType= "image/jpeg";
image.Save(context.Response.OutputStream,System.Drawing.Imaging.ImageFormat.Jpeg);
#endregion
}
catch (Exception ex)
{
//throw new Exception(ex.Message);
}
finally
{
if (image != null)
image.Dispose();
if (bm != null)
bm.Dispose();
stream.Close();
conn.Close();
}
}
接下来，配置Gridview控件的显示内容。
5.添加Sqldatasource控件，并配置好需要显示的数据内容；
在GridView控件中，选择数据源为SqlDataSource1，并添加三个字段，分别显示图片ID、图片缩略图，而通过LinkButton 控件来显示原来图片：
设计模式源代码：
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" AllowPaging="True" PageSize="5">
<Columns>
<asp:BoundField DataField="image_id" HeaderText="ID" />
<asp:TemplateField HeaderText="圖片">
<ItemTemplate>
<img src='<%# "GetImage.ashx?id="+ DataBinder.Eval(Container.DataItem,"image_id")%>' alt="" width="250px" height="250px"/>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="link">
<ItemTemplate>
<a href='<%#"GetImage.ashx?id="+ DataBinder.Eval(Container.DataItem,"image_id") %>' target="_blank">LinkButton</a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [image]"></asp:SqlDataSource>
<Columns>
<asp:BoundField DataField="image_id" HeaderText="ID" />
<asp:TemplateField HeaderText="圖片">
<ItemTemplate>
<img src='<%# "GetImage.ashx?id="+ DataBinder.Eval(Container.DataItem,"image_id")%>' alt="" width="250px" height="250px"/>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="link">
<ItemTemplate>
<a href='<%#"GetImage.ashx?id="+ DataBinder.Eval(Container.DataItem,"image_id") %>' target="_blank">LinkButton</a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [image]"></asp:SqlDataSource>
6.保存，运行代码！即可实现图片二进制形式写入数据库，并通过GridView + SqlDataSource控件来显示！
以下为完整代码：
1、前台XHTML代码：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>二进制形式写入数据库并显示</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<br />
<asp:Label ID="Label1" runat="server" ForeColor="Red"></asp:Label><br />
<br />
<br />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" AllowPaging="True" PageSize="5">
<Columns>
<asp:BoundField DataField="image_id" HeaderText="ID" />
<asp:TemplateField HeaderText="圖片">
<ItemTemplate>
<img src='<%# "GetImage.ashx?id="+ DataBinder.Eval(Container.DataItem,"image_id")%>' alt="" width="250px" height="250px"/>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="link">
<ItemTemplate>
<a href='<%#"GetImage.ashx?id="+ DataBinder.Eval(Container.DataItem,"image_id") %>' target="_blank">LinkButton</a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [image]"></asp:SqlDataSource>
</div>
</form>
</body>
</html>
<head runat="server">
<title>二进制形式写入数据库并显示</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<br />
<asp:Label ID="Label1" runat="server" ForeColor="Red"></asp:Label><br />
<br />
<br />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" AllowPaging="True" PageSize="5">
<Columns>
<asp:BoundField DataField="image_id" HeaderText="ID" />
<asp:TemplateField HeaderText="圖片">
<ItemTemplate>
<img src='<%# "GetImage.ashx?id="+ DataBinder.Eval(Container.DataItem,"image_id")%>' alt="" width="250px" height="250px"/>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="link">
<ItemTemplate>
<a href='<%#"GetImage.ashx?id="+ DataBinder.Eval(Container.DataItem,"image_id") %>' target="_blank">LinkButton</a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [image]"></asp:SqlDataSource>
</div>
</form>
</body>
</html>
2.GetImage.ashx文件：
<%@ WebHandler Language="C#" Class="GetImage" %>
using System;
using System.Web;
using System.Configuration;
using System.IO;
using System.Drawing;
using System.Data.SqlClient;
public class GetImage : IHttpHandler {
public void ProcessRequest (HttpContext context) {
//context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");
int ID = int.Parse(context.Request["id"].ToString());
string constr = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
MemoryStream stream = new MemoryStream();
SqlConnection conn = new SqlConnection(constr);
Bitmap bm = null;
Image image = null;
try
{
conn.Open();
SqlCommand cmd = new SqlCommand("select image_name from image where image_id='" + ID + "'", conn);
byte[] blob = (byte[])cmd.ExecuteScalar();
context.Response.ContentType = "image/gif";
context.Response.BinaryWrite(blob);
context.Response.End();
#region
stream.Write(blob, 78, blob.Length - 78);
bm = new Bitmap(stream);
int width = 48;
int height = (int)(width * ((double)bm.Height / (double)bm.Width));
// getthumbnailimage生成缩略图
image = bm.GetThumbnailImage(width, height, null, IntPtr.Zero);
context.Response.ContentType= "image/jpeg";
image.Save(context.Response.OutputStream,System.Drawing.Imaging.ImageFormat.Jpeg);
#endregion
}
catch (Exception ex)
{
//throw new Exception(ex.Message);
}
finally
{
if (image != null)
image.Dispose();
if (bm != null)
bm.Dispose();
stream.Close();
conn.Close();
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
using System;
using System.Web;
using System.Configuration;
using System.IO;
using System.Drawing;
using System.Data.SqlClient;
public class GetImage : IHttpHandler {
public void ProcessRequest (HttpContext context) {
//context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");
int ID = int.Parse(context.Request["id"].ToString());
string constr = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
MemoryStream stream = new MemoryStream();
SqlConnection conn = new SqlConnection(constr);
Bitmap bm = null;
Image image = null;
try
{
conn.Open();
SqlCommand cmd = new SqlCommand("select image_name from image where image_id='" + ID + "'", conn);
byte[] blob = (byte[])cmd.ExecuteScalar();
context.Response.ContentType = "image/gif";
context.Response.BinaryWrite(blob);
context.Response.End();
#region
stream.Write(blob, 78, blob.Length - 78);
bm = new Bitmap(stream);
int width = 48;
int height = (int)(width * ((double)bm.Height / (double)bm.Width));
// getthumbnailimage生成缩略图
image = bm.GetThumbnailImage(width, height, null, IntPtr.Zero);
context.Response.ContentType= "image/jpeg";
image.Save(context.Response.OutputStream,System.Drawing.Imaging.ImageFormat.Jpeg);
#endregion
}
catch (Exception ex)
{
//throw new Exception(ex.Message);
}
finally
{
if (image != null)
image.Dispose();
if (bm != null)
bm.Dispose();
stream.Close();
conn.Close();
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
3.后代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;
using System.IO;
public partial class Default3 : System.Web.UI.Page
{
string constr = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
GridView1.DataBind();
}
}
protected void Button1_Click(object sender, EventArgs e)
{
try
{
string ImgPath = FileUpload1.PostedFile.FileName; //获取FileUpload控件上的内容
string ImgName = ImgPath.Substring(ImgPath.LastIndexOf("\\") + 1); //获取图片文件名
string ImgExtend = ImgPath.Substring(ImgPath.LastIndexOf(".") + 1); //获取图片扩展名(图片类型)
if (!(ImgExtend == "bmp" || ImgExtend == "jpg" || ImgExtend == "gif")) //判断图片上传类型
{
Label1.Text = "上传格式不正确！";
return;
}
int FileLen = FileUpload1.PostedFile.ContentLength;
Byte[] FileData = new Byte[FileLen];
HttpPostedFile hp = FileUpload1.PostedFile;
Stream sr = hp.InputStream; //创建文件流
sr.Read(FileData, 0, FileLen);
SqlConnection con = new SqlConnection(constr); //连接数据库
string query = "insert into image (image_name) values (@imgdata)";
con.Open();
SqlCommand cmd = new SqlCommand(query, con);
cmd.Parameters.Add("@imgdata", SqlDbType.Image); //以参数化形式写入数据库
cmd.Parameters["@imgdata"].Value = FileData;
cmd.ExecuteNonQuery();
con.Close();
Label1.Text = "save!!";
GridView1.DataBind();
}
catch(Exception error)
{
Label1.Text = "处理失败！原因为：" + error.ToString();
}
}
}
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;
using System.IO;
public partial class Default3 : System.Web.UI.Page
{
string constr = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
GridView1.DataBind();
}
}
protected void Button1_Click(object sender, EventArgs e)
{
try
{
string ImgPath = FileUpload1.PostedFile.FileName; //获取FileUpload控件上的内容
string ImgName = ImgPath.Substring(ImgPath.LastIndexOf("\\") + 1); //获取图片文件名
string ImgExtend = ImgPath.Substring(ImgPath.LastIndexOf(".") + 1); //获取图片扩展名(图片类型)
if (!(ImgExtend == "bmp" || ImgExtend == "jpg" || ImgExtend == "gif")) //判断图片上传类型
{
Label1.Text = "上传格式不正确！";
return;
}
int FileLen = FileUpload1.PostedFile.ContentLength;
Byte[] FileData = new Byte[FileLen];
HttpPostedFile hp = FileUpload1.PostedFile;
Stream sr = hp.InputStream; //创建文件流
sr.Read(FileData, 0, FileLen);
SqlConnection con = new SqlConnection(constr); //连接数据库
string query = "insert into image (image_name) values (@imgdata)";
con.Open();
SqlCommand cmd = new SqlCommand(query, con);
cmd.Parameters.Add("@imgdata", SqlDbType.Image); //以参数化形式写入数据库
cmd.Parameters["@imgdata"].Value = FileData;
cmd.ExecuteNonQuery();
con.Close();
Label1.Text = "save!!";
GridView1.DataBind();
}
catch(Exception error)
{
Label1.Text = "处理失败！原因为：" + error.ToString();
}
}
}
//------------------------------------------------------------------------------------------------//
另外想说明的是：
有些人觉得图片二进制写进数据库太麻烦，可以直接把图片上传后放进项目下的 文件夹内！
然而获取的时候，不能通过Image控件来读取。
而只能通过img标签以 img中的src属性以：
<%# Eval("数据库中的图片文件名字段")%>绑定的形式来获取到图片！！