这是我的第一编博客,主要是给自己做个笔记。首先在sqlserver2008里建表,id(自动标识),name(varchar(50)),pictrue(image)
新建web窗体应用程序,再添加一个webform,则共有两个aspx,看图:
GetPicture.aspx不用改动,改动GetPicture.aspx.cs就行了,在GetPicture.aspx.cs里获取图片,并传给
Default.aspx,Default.aspx里的布局是这样的
然后其源代码是这样的:
Default.aspx里DataList的数据直接来源分别是Default.aspx.cs,和GetPicture.aspx.cs,Default.aspx.cs获取id和name信息,GetPicture.aspx.cs获取图片信息,
图片信息的获取没有调用Model层,而是通过id从数据库获取图片信息,所以DataList里,Image的绑定方式不一样。
GetPicture.aspx.cs里的源代码
public partial class WebForm1 : System.Web.UI.Page
{
private ConSQL dal=new ConSQL();
protected void Page_Load(object sender, EventArgs e)
{
int id = Convert.ToInt32(Request.QueryString["Id"]);
byte[] photo = null;
photo = dal.GetPicture(id);
//Response.ContentType = "image/jpg";
Response.BinaryWrite(photo);
//Response.End();
}
}
ConSQL是DAL层的类,然后看GetPicture(id);的代码:
public byte[] GetPicture(int id)
{
SqlConnection con = new SqlConnection(connectionstring);
string sql = "select picture from tb_pic where id=@id";
SqlCommand cmd = new SqlCommand(sql, con);
cmd.Parameters.Add(new SqlParameter("@id", id));
con.Open();
SqlDataReader reader = cmd.ExecuteReader();
byte[] photo = null;
if (reader != null)
{
reader.Read();
if (reader[0] != null)
{
photo = (byte[])reader[0];
}
}
reader.Close();
con.Close();
return photo;
}
GetPicture.aspx.cs中通过Response.BinaryWrite(photo);把图片信息(字节数组)传给Default.aspx的Image标签
再看Default.aspx,cs是如何把图片以二进制的形式保存进数据库的:
protected void Submit_Click(object sender, EventArgs e)
{
HttpPostedFile htp = FileUpload.PostedFile;
Stream ImaStream = htp.InputStream;
int picLength=FileUpload.PostedFile.ContentLength;//获取文件长度
string name = PicName.Text;
byte[] PicByte=new byte[picLength];
ImaStream.Read(PicByte, 0, picLength);//此步不可少,否则不能显示图片
dal.SaveImageToSQL(name,PicByte);
DataList.DataSource = dal.GetAllFromSQL();
DataList.DataBind();
}
点击提交按钮触发这个函数,这里的思路是FileUpload.PostedFile;(上传的图片)----->HttpPostedFile htp------->得到
HttpPostedFile的输入流(图片信息转成输入流信息)------>赋给Stream ImaStream 然后Stream对象调用Read函数将输入流读到字节数组中
这里要注意如果直接把FileUpload.PostedFile赋给Stream ImaStream则DataList不会显示图片信息,看运行效果: