asp.net mvc 2.0 上传图片到数据库及显示

 我们讨论上传图片不对图片做任何更改.

首先图片是以字节块存入数据库的,所以我们应该在数据库中增加一列名为ImageFile,类型为varbinary.

我们在做Model层,我采用的是Linq to Sql 映射表,

我们在写工具类,这个工具类很简单只有一个条件查询和增加,保存,代码如下:

代码

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 
 6 namespace ImageUploadFilesDome.Models
 7 {
 8     public class ImagesRepository
 9     {
10             TestImageDataDataContext db = new TestImageDataDataContext(); //这个就是Linq自动生成的模型工具类
11 
12             public Test GetFind(int id)
13             {
14                 return db.Test.SingleOrDefault(i => i.ImageId == id);
15             }
16             public void AddTest(Test te)
17             {
18                 db.Test.InsertOnSubmit(te);
19             }
20 
21                     public void SaveTest()
22             {
23                 db.SubmitChanges();
24             }
25     }
26 }
27  

我们在编写HomeController代码如下:

代码

 1 using System;
 2  using System.Collections.Generic;
 3  using System.Linq;
 4  using System.Web;
 5  using System.Web.Mvc;
 6  using ImageUploadFilesDome.Models;
 7 
 8  namespace ImageUploadFilesDome.Controllers
 9 {
10     [HandleError]
11     public class HomeController : Controller
12     {
13         public ActionResult Index()
14         {
15             int id = 1;//为了演示功能成功所以我这里自定义ID,在正常情况下这个值应该是根据业务传进来的.
16              ImagesRepository imgRepository = new ImagesRepository();
17             Test te = imgRepository.GetFind(id) ?? new Test();
18             return View(te);
19         }
20 
21         [HttpPost]
22         public ActionResult Index(HttpPostedFileBase imgUpload, Test model)
23         {
24             ImagesRepository imgRepository = new ImagesRepository();
25             Test te = imgRepository.GetFind(model.ImageId);
26             if (ModelState.IsValid)
27             {
28                 //这里我只做文件是否上传,没有对文件处理,如果你想对文件做处理,你就应该实现Image文件规则,必须由model下的ImageRepository类去实现
29                  if (imgUpload != null)
30                 {
31                     byte[] imgBt = new byte[imgUpload.ContentLength];
32                     //将接受到文件读到字节数组中
33                     imgUpload.InputStream.Read(imgBt, 0, imgUpload.ContentLength);
34                     te.ImageFile = imgBt;
35                     if (model != null)//判断页面model是否为空,如果为空表示是第一次增加图片,相反就是修改图片
36                     {
37                         UpdateModel(te);
38 
39                     }
40                     else
41                     {
42                         imgRepository.AddTest(te);
43 
44                     }
45                     imgRepository.SaveTest(); //保存数据
46                     return RedirectToAction("Index");
47                 }
48             }
49             return RedirectToAction("Index");
50         }
51 
52         public ActionResult ImageFiles(int id)
53         {
54             ImagesRepository imgRepository = new ImagesRepository();
55             Test te = imgRepository.GetFind(id) ?? new Test();
56             if (te.ImageFile != null)
57             {
58                 Response.BinaryWrite(te.ImageFile.ToArray());
59             }
60             return View();
61         }
62         public ActionResult About()
63         {
64             return View();
65         }
66     }
67 }
68 

编写index.aspx前台文件代码如下:

代码

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<ImageUploadFilesDome.Models.Test>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Index
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Index</h2>
<!--已经要注意Form表头文件的写法,在有文件的似乎没有设定enctype参数Action那边是接受不到文件信息的-->
    <% using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" })) {%>

        <fieldset>
            <legend><img  id="imgfile" src='Home/ImageFiles/ <%=Model.ImageId %>' alt="照片" /></legend>
             <div class="editor-label">
                <%= Html.LabelFor(model => model.ImageId) %>
            </div>
            <div class="editor-field">
                <%= Html.TextBoxFor(model => model.ImageId) %>
                <%= Html.ValidationMessageFor(model => model.ImageId) %>
            </div>
            <div class="editor-field">
                <input name="ImgUpload" type="file" />
            </div>
            <p>
                <input type="submit" value="Save" />
            </p>
        </fieldset>

    <% } %>

</asp:Content>

 

注意,img 标签的src属性路径,因为我们是在MVC中有Routesing所以我们还是以控制层作为回传显示图片.