数据库存取图片并在MVC3中显示在View中
2012-03-15 22:32
295 查看
简介:在有些情况下需要将图片转换为二进制流存放在数据库中,当显示时再从数据库中读出来显示在界面上。
本文简单介绍数据库中图片的存取方法,并在MVC3中显示在Razor视图中。仅供初学者参考学习。
1. 将图片转换为二进制流
/// <summary>
/// convert a picture file to byte array
/// </summary>
public byte[] GetBytesFromImage(string filename)
{
FileStream fs = new FileStream(filename,FileMode.Open,FileAccess.Read);
int length = (int)fs.Length;
byte[] image = new byte[length];
fs.Read(image, 0, length);
fs.Close();
return image;
}
2. 将二进制文件写入数据库
/// <summary>
/// write byte array to database
/// </summary>
public void StoreImageToDB(byte[] image)
{
string connectionString = "Data Source=.;Initial Catalog=MyDB;User Id=sa;Password=123456";
string strSql = "INSERT INTO TestImage(image) Values(@image)";
using (SqlConnection connection = new SqlConnection(connectionString))
{
SqlCommand cmd = new SqlCommand(strSql,connection);
cmd.Parameters.Add("@image", SqlDbType.Image).Value = image;
connection.Open();
cmd.ExecuteNonQuery();
cmd.Clone();
}
}
3. 从数据库中读取图片
/// <summary>
/// get image from database
/// </summary>
public byte[] GetBytesFromDB()
{
string connectionString = "Data Source=.;Initial Catalog=MyDB;User Id=sa;Password=123456";
string strSql = "SELECT top 1 image FROM TestImage";
using (SqlConnection connection = new SqlConnection(connectionString))
{
SqlCommand cmd = new SqlCommand(strSql,connection);
connection.Open();
SqlDataReader reader = cmd.ExecuteReader();
byte[] temp = null;
if (reader.Read())
{
temp = (byte[])reader.GetValue(0);
}
return temp;
}
}
4. 在Controller中添加返回图片的方法
/// <summary>
/// Action that return the image file
/// </summary>
public FileResult Image()
{
//get image from database
byte[] image = GetBytesFromDB();
//return the image to View
return new FileContentResult(image, "image/jpeg");
//or like below
//MemoryStream mem = new MemoryStream(image, 0, image.Length);
//return new FileStreamResult(mem, "image/jpg");
}
5. 在View中显示图片, 将src指定为我们返回图片的Action方法
<img alt="" src="/Home/Image" />
上面的方法都是我们自己实现且用SQL语句存取数据库,其实.NET框架已经给我们封装好了
很多现成的类,再加上 EF 存取数据库可以使我们的代码变得更加 elegant。
1. 前台上传图片
@using (Html.BeginForm("Edit", "Admin", FormMethod.Post,
new { enctype = "multipart/form-data" })) {
<div>Upload new image: <input type="file" name="Image" /></div>
<input type="submit" value="Save" />
}
它相当于 webform 中的 :
<form action="/Admin/Edit" enctype="multipart/form-data" method="post">
enctype = "multipart/form-data" 告诉浏览器将我们的文件流 post 到后台。
2. 将图片存入数据库
[HttpPost]
public ActionResult Edit(Product product, HttpPostedFileBase image) {
if (ModelState.IsValid) {
if (image != null) {
product.ImageMimeType = image.ContentType;
product.ImageData = new byte[image.ContentLength];
image.InputStream.Read(product.ImageData, 0, image.ContentLength);
}
// save the product
repository.SaveProduct(product);
return RedirectToAction("Index");
} else {
// there is something wrong with the data values
return View(product);
}
}
MVC框架会自动封装实例化我们的实体类和文件流并传到 post 方法中。
其中 HttpPostedFileBase 是一个抽象类,实际传过来的对象
是它的子类 HttpPostedFileWrapper 对象。
HttpPostedFileBase 类定义了很多操作文件流的属性和接口。
3. 在 view 中请求显示图片的 action
<img src="@Url.Action("GetImage", "Product", new { Model.ProductID })" />
其中读取图片流的方法如下:
public FileContentResult GetImage(int productId) {
Product prod = repository.Products.FirstOrDefault(p => p.ProductID == productId);
if (prod != null) {
return File(prod.ImageData, prod.ImageMimeType);
} else {
return null;
}
}
其中 FileContentResult 是 ActionResult 的子类 ,action 的返回类型有很多种,它们都继承自抽象类 ActionResult 。
本文简单介绍数据库中图片的存取方法,并在MVC3中显示在Razor视图中。仅供初学者参考学习。
1. 将图片转换为二进制流
/// <summary>
/// convert a picture file to byte array
/// </summary>
public byte[] GetBytesFromImage(string filename)
{
FileStream fs = new FileStream(filename,FileMode.Open,FileAccess.Read);
int length = (int)fs.Length;
byte[] image = new byte[length];
fs.Read(image, 0, length);
fs.Close();
return image;
}
2. 将二进制文件写入数据库
/// <summary>
/// write byte array to database
/// </summary>
public void StoreImageToDB(byte[] image)
{
string connectionString = "Data Source=.;Initial Catalog=MyDB;User Id=sa;Password=123456";
string strSql = "INSERT INTO TestImage(image) Values(@image)";
using (SqlConnection connection = new SqlConnection(connectionString))
{
SqlCommand cmd = new SqlCommand(strSql,connection);
cmd.Parameters.Add("@image", SqlDbType.Image).Value = image;
connection.Open();
cmd.ExecuteNonQuery();
cmd.Clone();
}
}
3. 从数据库中读取图片
/// <summary>
/// get image from database
/// </summary>
public byte[] GetBytesFromDB()
{
string connectionString = "Data Source=.;Initial Catalog=MyDB;User Id=sa;Password=123456";
string strSql = "SELECT top 1 image FROM TestImage";
using (SqlConnection connection = new SqlConnection(connectionString))
{
SqlCommand cmd = new SqlCommand(strSql,connection);
connection.Open();
SqlDataReader reader = cmd.ExecuteReader();
byte[] temp = null;
if (reader.Read())
{
temp = (byte[])reader.GetValue(0);
}
return temp;
}
}
4. 在Controller中添加返回图片的方法
/// <summary>
/// Action that return the image file
/// </summary>
public FileResult Image()
{
//get image from database
byte[] image = GetBytesFromDB();
//return the image to View
return new FileContentResult(image, "image/jpeg");
//or like below
//MemoryStream mem = new MemoryStream(image, 0, image.Length);
//return new FileStreamResult(mem, "image/jpg");
}
5. 在View中显示图片, 将src指定为我们返回图片的Action方法
<img alt="" src="/Home/Image" />
上面的方法都是我们自己实现且用SQL语句存取数据库,其实.NET框架已经给我们封装好了
很多现成的类,再加上 EF 存取数据库可以使我们的代码变得更加 elegant。
1. 前台上传图片
@using (Html.BeginForm("Edit", "Admin", FormMethod.Post,
new { enctype = "multipart/form-data" })) {
<div>Upload new image: <input type="file" name="Image" /></div>
<input type="submit" value="Save" />
}
它相当于 webform 中的 :
<form action="/Admin/Edit" enctype="multipart/form-data" method="post">
enctype = "multipart/form-data" 告诉浏览器将我们的文件流 post 到后台。
2. 将图片存入数据库
[HttpPost]
public ActionResult Edit(Product product, HttpPostedFileBase image) {
if (ModelState.IsValid) {
if (image != null) {
product.ImageMimeType = image.ContentType;
product.ImageData = new byte[image.ContentLength];
image.InputStream.Read(product.ImageData, 0, image.ContentLength);
}
// save the product
repository.SaveProduct(product);
return RedirectToAction("Index");
} else {
// there is something wrong with the data values
return View(product);
}
}
MVC框架会自动封装实例化我们的实体类和文件流并传到 post 方法中。
其中 HttpPostedFileBase 是一个抽象类,实际传过来的对象
是它的子类 HttpPostedFileWrapper 对象。
HttpPostedFileBase 类定义了很多操作文件流的属性和接口。
3. 在 view 中请求显示图片的 action
<img src="@Url.Action("GetImage", "Product", new { Model.ProductID })" />
其中读取图片流的方法如下:
public FileContentResult GetImage(int productId) {
Product prod = repository.Products.FirstOrDefault(p => p.ProductID == productId);
if (prod != null) {
return File(prod.ImageData, prod.ImageMimeType);
} else {
return null;
}
}
其中 FileContentResult 是 ActionResult 的子类 ,action 的返回类型有很多种,它们都继承自抽象类 ActionResult 。
相关文章推荐
- (转载)数据库存取图片并在MVC3中显示在View中
- 数据库存取图片 asp.net 显示到Image控件
- Recyclerview显示数据+GreenDao数据库+跳转传值(图片圆)+MVP
- Silverlight显示数据库二进制字段图片(RadTileView)
- ASP.net:上传图片以二进制插入到数据库,且读取显示
- 利用WebView加载HTML代码时解决图片正常显示
- 举例说明android中Bitmap、ListView以及ImageView的综合使用---显示图片并获取图片的宽和高
- Android TextView 显示HTML加图片
- Android可以动态控制图片显示区域的自定义ImageView
- 图片根据数据库的时间(开始时间与结束时间)与本地时间相比,在网页上显示。
- Android中Textview显示带html文本二-------【Textview显示本地图片】
- Anroid5.0下webview显示本地图片
- 为什么我这两个ImageView所显示的图片是一样大的呢,我是想把图片设置更大点,可怎么设置都一样啊
- 以缩略图方式在网页中显示数据库中的图片
- IT观察】网络通信、图片显示、数据库操作……Android程序员如何利用开源框架
- 自定义View来显示gif格式图片
- 利用数据库如何存入BLOB格式图片,并从数据库中取出BLBO格式图片显示出来
- android viewpager 一页显示多个图片
- qt利用委托:QStyledItemDelegate,实现tableview 的表格项的自定义显示,如插入图片,绘制控件
- 在Android中如何获取视频的第一帧图片并显示在一个ImageView中