如何在數據庫中保存圖像並將其顯示在MVC 4中的視圖中？

Question

我有一張像以下一樣的表格：

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

我想用文件上傳來上傳文件。 如何在數據庫中保存圖像並將其顯示到視圖中？

Answer 1

1. 在解決方案資源管理器中創建“圖像”文件夾 。
2. 創建ADO.NET實體數據模型 （在此示例中為“Database1Entities”）

3. 家庭控制器：

    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. 索引視圖

    @{ 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. 顯示視圖

    @{ 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> } 

輸出：

/家/

/家庭/顯示/