数据库存取图片并在MVC3中显示在View中

根据路径读取图片:
byte[] img = System.IO.File.ReadAllBytes(@"d:\xxxx.jpg");

简介:在有些情况下需要将图片转换为二进制流存放在数据库中,当显示时再从数据库中读出来显示在界面上。

本文简单介绍数据库中图片的存取方法,并在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();        

    }        

    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, , 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 。

最新文章

  1. linux黄金命令[积累中]
  2. [ZigBee] 6、ZigBee基础实验——定时器3和定时器4(8 位定时器)
  3. 解猜数字(XAXB)
  4. linux中的帮助命令
  5. Javascript事件委托
  6. Android or iOS 运行 meteor App 屏幕一片空白 White screen的解决方法
  7. javascript正则表达式简介
  8. C#主线程等待子线程运行结束
  9. T-SQL 函数概述
  10. jQuery $.each用法比较详细了
  11. 数据解析之XML和JSON
  12. RAD路线规划2016版
  13. Unity启动事件-监听:InitializeOnLoad
  14. Chapter 15_1 require函数
  15. Web前端总结(小伙伴的)
  16. JS字符串和数组常用方法
  17. 一张图搞定OAuth2.0
  18. SD卡
  19. Java for-each循环解惑
  20. Python random模块方法

热门文章

  1. Centos7 配置静态IP并使用xshell远程连接
  2. SQLSERVER|CDC日志变更捕获机制
  3. [Beta]Scrum Meeting#5
  4. SAS 指定LOG LIST输出
  5. asp.netCore3.0区域和路由配置变化
  6. Set JAVA_HOME in windows cmd(在windows 命令行中修改JAVA_HOME)
  7. Generate a Certificate Signing Request (CSR) in macOS Keychain Access
  8. EasyNVR摄像机网页无插件直播方案H5前端构建之:区分页面是自跳转页面还是分享页面
  9. [LeetCode] 929. Unique Email Addresses 唯一的电邮地址
  10. 【Spring Boot学习之二】WEB开发