MVC中根据后台绝对路径读取图片并显示在IMG中
数据库存取图片并在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 。
最新文章
- linux黄金命令[积累中]
- [ZigBee] 6、ZigBee基础实验——定时器3和定时器4(8 位定时器)
- 解猜数字(XAXB)
- linux中的帮助命令
- Javascript事件委托
- Android or iOS 运行 meteor App 屏幕一片空白 White screen的解决方法
- javascript正则表达式简介
- C#主线程等待子线程运行结束
- T-SQL 函数概述
- jQuery $.each用法比较详细了
- 数据解析之XML和JSON
- RAD路线规划2016版
- Unity启动事件-监听:InitializeOnLoad
- Chapter 15_1 require函数
- Web前端总结(小伙伴的)
- JS字符串和数组常用方法
- 一张图搞定OAuth2.0
- SD卡
- Java for-each循环解惑
- Python random模块方法
热门文章
- Centos7 配置静态IP并使用xshell远程连接
- SQLSERVER|CDC日志变更捕获机制
- [Beta]Scrum Meeting#5
- SAS 指定LOG LIST输出
- asp.netCore3.0区域和路由配置变化
- Set JAVA_HOME in windows cmd(在windows 命令行中修改JAVA_HOME)
- Generate a Certificate Signing Request (CSR) in macOS Keychain Access
- EasyNVR摄像机网页无插件直播方案H5前端构建之:区分页面是自跳转页面还是分享页面
- [LeetCode] 929. Unique Email Addresses 唯一的电邮地址
- 【Spring Boot学习之二】WEB开发