zoukankan      html  css  js  c++  java
  • (转载)数据库存取图片并在MVC3中显示在View中

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

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

  • 相关阅读:
    Spring boot项目搭建及简单实例
    nodejs的web开发框架之express(其中项目的案例也是后端渲染)
    node的系统核心模块实现服务器功能、用nodejs做动态网站(后端渲染)
    nodejs包管理工具npm 、yarn
    node的基本操作、文件路径、文件读、取、目录读取删
    了解node、ES6
    相对单位em、rem
    响应式开发---网页的布局方式、媒体查询、栅格化布局、less语言
    移动端插件的使用---zepto、iScroll、swiper、swipe、fastclick
    base.css
  • 原文地址:https://www.cnblogs.com/forthelichking/p/4226290.html
Copyright © 2011-2022 走看看