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

问题描述

我有一个表格如下：

  CREATE TABLE [dbo]。[tblA] 
 $ b [id] INT NOT NULL PRIMARY KEY IDENTITY，
 [fname] NVARCHAR（50）NULL，
 [lname] NVARCHAR（50）NULL，
 [imageUrl] 
）
  

我想使用文件上传来上传文件。
如何将数据库中的图像保存到视图中？

解决方案

2. 创建 ADO.NET实体数据模型（在此示例中为Database1Entities）
;
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视图（）;
}

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）;

//将图像保存到文件夹
file.SaveAs（physicalPath）;

//在数据库中保存新记录
tblA newRecord = new tblA（）;
newRecord.fname = Request.Form [fname];
newRecord.lname = Request.Form [lname];
newRecord.imageUrl = ImageName;
db.tblAs.Add（newRecord）;
db.SaveChanges（）;

}
//显示记录
return RedirectToAction（../ home / Display /）;
}

public ActionResult Display（）
{
return View（）;
}
}
}





3. 查看查看

     @ {
    ViewBag.Title =Index; 
   } 
    
    @using（Html.BeginForm（FileUpload，Home，FormMethod.Post，
    new {enctype =multipart / form-data}） 
    {
   < div> 
   名字< br /> 
    @ Html.TextBox（fname）< br /> 
   姓氏< br /> 
    @ Html.TextBox（lname）< br /> 
   图片< br /> 
   < input type =filename =fileid =filestyle =width：100％; /> < br /> 
   < input type =submitvalue =上传class =submit/> 
   < / div> 
   } 
     
    




4. 显示
   
   

     @ {
    ViewBag.Title =Display; 
   } 
    
    @ {
    test2.Database1Entities db = new test2.Database1Entities（）; 
   } 
    @using（Html.BeginForm（））
    {
   < table border =1> 
   < thead> 
   < tr> 
   < th>图片< / th> 
   < th>名字< / th> 
   < th>姓氏< / th> 
   < / tr> 
   < / thead> 
   < tbody> 
    @foreach（db.tblAs中的var项）
    {
   < tr> 
   < td>< img src =~/images/@item.imageUrlwidth =100height =100/>< / td> 
   < td> @ item.fname< / td> 
   < td> @ item.lname< / td> 
   < / tr> 
   } 
   < / tbody> 
   < / table> 
   } 
     

em>输出：

$ b

>

/ 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屋！