如何将图像保存在数据库中并将其显示到 MVC 4 中的视图中? [英] How to save image in database and display it into Views in MVC 4?

问题描述

我有一张如下表:

创建表 [dbo].[tblA]([Id] INT NOT NULL 主键标识，[fname] NVARCHAR(50) NULL，[lname] NVARCHAR(50) NULL，[imageUrl] NVARCHAR(50) NULL)

我想使用文件上传来上传文件.如何将图像保存在数据库中并显示在视图中?

解决方案

1. 在解决方案资源管理器中创建一个图像"文件夹.
2. 创建一个 ADO.NET 实体数据模型(在本例中为Database1Entities")

3. 主页控制器:

   使用系统；使用 System.Collections.Generic;使用 System.Linq；使用 System.Web；使用 System.Web.Mvc;命名空间 test2.Controllers{公共类 HomeController : 控制器{公共 ActionResult 索引(){返回视图()；}公共 ActionResult 文件上传(HttpPostedFileBase 文件){如果(文件！= null){Database1Entities db = new Database1Entities();string ImageName = System.IO.Path.GetFileName(file.FileName);string physicalPath =Server.MapPath("~/images/"+ ImageName);//保存图片到文件夹文件.另存为(物理路径)；//在数据库中保存新记录tblA 新记录 = 新 tblA();newRecord.fname = Request.Form["fname"];newRecord.lname = Request.Form["lname"];newRecord.imageUrl = ImageName;db.tblAs.Add(newRecord);db.SaveChanges();}//显示记录return RedirectToAction("../home/Display/");}公共动作结果显示(){返回视图()；}}}

4. 索引查看

   @{ViewBag.Title = "索引";}@using (Html.BeginForm("FileUpload", "Home", FormMethod.Post,new { enctype = "multipart/form-data" })){<div>名字
   @Html.TextBox("fname") 
   姓氏<br/>@Html.TextBox("lname") 
   图像<br/><input type="file" name="file" id="file" style="width: 100%;"/><br/><input type="submit" value="Upload" class="submit"/>

}

显示查看

@{ViewBag.Title = "显示";}@{test2.Database1Entities db = new test2.Database1Entities();}@using (Html.BeginForm()){<表格边框=1"><头><tr><th>图像</th><th>名字</th><th>Last name</th></tr></thead>@foreach(db.tblAs 中的 var 项目){<tr><td><img src="~/images/@item.imageUrl" width="100" height="100"/></td><td>@item.fname</td><td>@item.lname</td></tr>}</tbody>}

输出:

/首页/

/home/Display/

I have a table like followin:

CREATE TABLE [dbo].[tblA]
(
    [Id] INT NOT NULL PRIMARY KEY IDENTITY, 
    [fname] NVARCHAR(50) NULL, 
    [lname] NVARCHAR(50) NULL, 
    [imageUrl] NVARCHAR(50) NULL
)

I want use file upload to upload file. How to save image in database and display it into Views?

解决方案

1. Creat an "Images" folder in Solution explorer.
2. Create an ADO.NET Entity Data Model (in this example is "Database1Entities")

3. Home Controller:

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Web;
   using System.Web.Mvc;
   
   namespace test2.Controllers
   {
   public class HomeController : Controller
   {
   public ActionResult Index()
   {
       return View();
   }
   
   public ActionResult FileUpload(HttpPostedFileBase file)
   {
   
       if (file != null)
       {
           Database1Entities db = new Database1Entities();
           string ImageName = System.IO.Path.GetFileName(file.FileName);
           string physicalPath =Server.MapPath("~/images/"+ ImageName);
   
           // save image in folder
           file.SaveAs(physicalPath);
   
           //save new record in database
           tblA newRecord = new tblA();
           newRecord.fname = Request.Form["fname"];
           newRecord.lname = Request.Form["lname"];
           newRecord.imageUrl = ImageName;
           db.tblAs.Add(newRecord);
           db.SaveChanges();
   
       }
       //Display records
       return RedirectToAction("../home/Display/");
   }
   
   public ActionResult Display()
   {
       return View();
   }
   }
   }
   

4. Index View

   @{
      ViewBag.Title = "Index";
   }
   
   @using (Html.BeginForm("FileUpload", "Home", FormMethod.Post,
                       new { enctype = "multipart/form-data" }))
   {
   <div>
   First name<br />
   @Html.TextBox("fname") <br />
   Last name<br />
   @Html.TextBox("lname") <br />
   Image<br />
   <input type="file" name="file" id="file" style="width: 100%;" /> <br />
   <input type="submit" value="Upload" class="submit" />
   </div>    
   }
   

5. Display View

   @{
       ViewBag.Title = "Display";
   }
   
   @{
      test2.Database1Entities db = new test2.Database1Entities();
   }
   @using (Html.BeginForm())
   {
   <table border="1">
   <thead>
       <tr>
           <th>Image</th>
           <th>First name</th>
           <th>Last name</th>
       </tr>
   </thead>
   <tbody>
       @foreach (var item in db.tblAs)
       {
           <tr>
               <td><img src="~/images/@item.imageUrl" width="100" height="100" /></td>
               <td>@item.fname</td>
               <td>@item.lname</td>
           </tr>
       }
   </tbody>
   </table>
   }
   

Output:

/Home/

/home/Display/

这篇关于如何将图像保存在数据库中并将其显示到 MVC 4 中的视图中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！