【读书笔记】Asp.Net MVC 上传图片到数据库(会的绕行)

 

之前上传图片的做法都是上传到服务器上的文件夹中,再将url保存到数据库。其实在MVC中将图片上传到数据库很便捷的事情,而且不用去存url了。而且这种方式支持ie6(ie6不支持jquery自动提交form,认为其不安全,这里form是主动点击提交的,所以就没有这个问题,而uploadify自动提交是flash的方式)。

一、建立模型

场景是假设我们需要给一个Product编辑一张图片。在模型中,先定义好两个属性,ImageData和ImageType

  1. public class Product {
  2.  
  3. [HiddenInput(DisplayValue=false)]
  4. public int ProductID { get; set; }
  5.  
  6. [Required(ErrorMessage = "Please enter a product name")]
  7. public string Name { get; set; }
  8.  
  9. [Required(ErrorMessage = "Please enter a description")]
  10. [DataType(DataType.MultilineText)]// 在前台会渲染成Textarea
  11. public string Description { get; set; }
  12.  
  13. [Required]
  14. [Range(0.01, double.MaxValue, ErrorMessage = "Please enter a positive price")]
  15. public decimal Price { get; set; }
  16.  
  17. [Required(ErrorMessage = "Please specify a category")]
  18. public string Category { get; set; }
  19. public byte[] ImageData { get; set; }
  20. [HiddenInput(DisplayValue = false)]//会让改属性在编辑的时候不显示出来。
  21. public string ImageType{ get; set; }
  22. }

二、存取方法

那在我们的控制器中,这样定义Edit方法。MVC强大的模型绑定机制会自动的将前台form中的数据根据name转换成我们需要的C#对象。当然后台代码这里只是简单的实现,文件大小和类型的判断先略过。

  1. [HttpPost] //保存
  2. public ActionResult Edit(Product product, HttpPostedFileBase image) {
  3.  
  4. if (ModelState.IsValid) {
  5. if (image != null) {
  6. product.ImageType = image.ContentType;//获取图片类型
  7. product.ImageData = new byte[image.ContentLength];//新建一个长度等于图片大小的二进制地址
  8. image.InputStream.Read(product.ImageData, 0, image.ContentLength);//将image读取到ImageData中
  9. }
  10. // save the product
  11. repository.UpdateProduct(product);//更新一下 保存模型。
  12. // add a message to the viewbag
  13. TempData["message"] = string.Format("{0} has been saved", product.Name);
  14. // return the user to the list
  15. return RedirectToAction("Index");
  16. } else {
  17. // there is something wrong with the data values
  18. return View(product);
  19. }
  20. }
  1. HttpPostedFileBase.inputStream 获取一个Stream 对象,该对象指向一个上载文件,以准备读取该文件的内容。

然后通过ID,将二进制转化为图片。

  1. public FileContentResult GetImage(int productId) {
  2. Product prod = repository.Products.FirstOrDefault(p => p.ProductID == productId);
  3. if (prod != null) {
  4. return File(prod.ImageData, prod.ImageMimeType);//File方法直接将二进制转化为指定类型了。
  5. } else {
  6. return null;
  7. }
  8. }

FileContentResult 最适合将二进制数据转换成文件,同类型还有FileStreamResult,FilePathResult,这三个都是继承与FileResult。

更详细的解释大家可以参考Artech大神的博客  :了解ASP.Net MVC几种ActionResult的本质

三、前台代码

  1. @using (Html.BeginForm("Edit", "Admin", FormMethod.Post,
  2. new { enctype = "multipart/form-data" })) {
  3.  
  4. @Html.EditorForModel()
  5.  
  6. <div class="editor-label">Image</div>
  7. <div class="editor-field"><div>Upload new image: <input type="file" name="Image" /></div>
  8. </div>
  9.  
  10. <input type="submit" value="Save" />
  11. @Html.ActionLink("Cancel and return to List", "Index")
  12. }
  1. @Html.EditorForModel() 会根据我们的模型自动渲染出编辑界面,比如是bool型,就会生成checkbox,而不用一条一条去写。不是太复杂的模型可以用这种较为快捷的方式

自动渲染的效果如下(勿喷,未处理样式)

那再获取图片的时候,就可以通过调用GetImage方法来获取。 和获取验证码的方式一样。 这种方式比之前上传写一堆脚本要好很多。

  1. <div class="item">
  2. @if (Model.ImageData != null) {
  3. <div style="float:left;margin-right:20px">
  4. <img width="75" height="75" src="@Url.Action("GetImage", "Product",
  5. new { Model.ProductID })" />
  6. </div>
  7. }
  8. .......
  9. <h4>@Model.Price.ToString("c")</h4>
  10. </div>

希望这次分享对你有帮助~

源代码参考SportShop

参考书籍:Pro Asp.Net MVC3 Framwork

 
 
分类: MVC读书笔记
标签: MVC读书笔记上传

Asp.Net MVC 上传图片到数据库的更多相关文章

  1. 【读书笔记】Asp.Net MVC 上传图片到数据库(会的绕行)

    之前上传图片的做法都是上传到服务器上的文件夹中,再将url保存到数据库.其实在MVC中将图片上传到数据库很便捷的事情,而且不用去存url了.而且这种方式支持ie6(ie6不支持jquery自动提交fo ...

  2. asp.net MVC SignalR 与数据库 实时同步显示

    asp.net MVC SignalR 与数据库 实时同步显示 错误:未启用当前数据库的 SQL Server Service Broker,因此查询通知不受支持.如果希望使用通知,请为此数据库启用 ...

  3. ASP.NET MVC 4 让数据库自动迁移

    今天实际测试了下这个方法,可以保持数据库与实体类同步,同时不会出现数据库迁移的提示.但是只能更改实体类来改变数据库,而不能改数据库来改变实体类.所以这才是Code frist,如果通过改数据库表来改动 ...

  4. asp.net mvc CodeFirst模式数据库迁移步骤

    利用Code First模式构建好基本的类后,项目也开始搭建完毕并成功运行,而且已经将数据库表结构自动生成了. 但是,我有新的类要加入,有字段需要修改,那怎么办呢,删库,跑路 ?  哈哈 利用数据库迁 ...

  5. 使用EF Code First搭建一个简易ASP.NET MVC网站,允许数据库迁移

    本篇使用EF Code First搭建一个简易ASP.NET MVC 4网站,并允许数据库迁移. 创建一个ASP.NET MVC 4 网站. 在Models文件夹内创建Person类. public ...

  6. Asp.Net MVC上传图片

    mvc上传图片 [HttpPost] public JsonResult Upload() { ) { ) { HttpPostedFileBase file = Request.Files[]; ) ...

  7. asp.net mvc上传图片案例

    1.放在ajax.BeginForm里,不好使,同asp.net 表单中 fileupload控件不支持ajax差不多吧,如果异步的话可以借助jquery.form.js,很方便 2. //上传文件  ...

  8. asp.net MVC上传图片完整方法

    图片上传 自动创建文件夹并重命名(带缩略图) 后台: [HttpPost] public ActionResult WanSell_UploadPicture(ProductGalleryModels ...

  9. ASP.NET MVC上传图片的奇怪问题

    本文来源于博客园-钱智慧,转载请注明出处 表现:客户说就华为的手机有问题,而且是在QQ里打开有问题,如果在手机的浏览器上,则可以正常上传图片. 有问题的代码如下: private ResultMode ...

随机推荐

  1. .net程序调用检测和性能分析工具——DotTrace

    DotTrace可以对.net程序进行性能监测,对正在运行的程序和网站监控,主要界面如下: 需要将该工具安装在程序运行的服务器上. 主要用到这个视图,显示了每个方法的时间,下面是反编译出来的代码. P ...

  2. HDU 3729 I&#39;m Telling the Truth(二部图最大匹配+结果输出)

    职务地址:HDU 3729 二分图最大匹配+按字典序输出结果. 仅仅要从数字大的開始匹配就能够保证字典序最大了.群里有人问. . 就顺手写了这题. . 代码例如以下: #include <ios ...

  3. 用C#绘图实现动画出现卡屏(运行慢)问题的解决办法

    原文:用C#绘图实现动画出现卡屏(运行慢)问题的解决办法 正在用C#做一个小游戏,需要用到动画,上次解决的问题是闪烁问题,用双缓冲技术.以为不会有什么问题了.后来当把图片全部绘制上去的时候依然出现了卡 ...

  4. 模拟linux下的ls -l命令

    #include <stdio.h> #include <stdlib.h> #include <string.h> #include <unistd.h&g ...

  5. SICP 练习 (2.12)解决摘要 :不同的实现时间

    SICP 2.12 要求我们定义一个构造函数make-center-percent,它接收两个參数,分别代表中心点和一个误差百分比.我们须要通过这个构造函数产生一个区间.此外还须要定义一个选择函数pe ...

  6. 第11章 享元模式(Flyweight Pattern)

    原文 第11章 享元模式(Flyweight Pattern) 概述:   面向对象的思想很好地解决了抽象性的问题,一般也不会出现性能上的问题.但是在某些情况下,对象的数量可能会太多,从而导致了运行时 ...

  7. 持续集成Jenkins + robot framework + git

    Jenkins + robot framework + git持续集成 一.Jenkins安装插件 进入系统管理—插件管理—可选插件下安装以下插件Git Client Plugin.GIT plugi ...

  8. 多校训练赛2 ZCC loves cards

    ZCC loves cards Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) ...

  9. hdu 2066 一个人的旅行 最短路径

    一个人的旅行 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Sub ...

  10. 矿Mac必备软件

    1.Svn工具: Cornerstone_v2.7.10 2.iPhone配置文件管理 iPhoneConfigUtility.dmg 3.有道 for mac http://cidian.youda ...