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

问题描述

我有一个表像跟随着：

  CREATE TABLE [DBO]。[tblA]
（
    [ID] INT NOT NULL PRIMARY KEY的身份，
    [FNAME] NVARCHAR（50）NULL，
    [LNAME] NVARCHAR（50）NULL，
    [图片网址] 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 =新Database1Entities（）;
           字符串ImageName = System.IO.Path.GetFileName（file.FileName）;
           字符串physicalPath =使用Server.Mappath（〜/图片/+ ImageName）;        //保存图像文件夹
           file.SaveAs（physicalPath）;        //保存在数据库中的新纪录
           tblA newRecord =新tblA（）;
           newRecord.fname =的Request.Form [FNAME];
           newRecord.lname =的Request.Form [LNAME];
           newRecord.imageUrl = ImageName;
           db.tblAs.Add（newRecord）;
           db.SaveChanges（）;    }
       //显示记录
       返回RedirectToAction（../家/显示/）;
   }公众的ActionResult显示（）
   {
       返回查看（）;
   }
   }
   }
    




4. 首页查看

     @ {
      ViewBag.Title =指数;
   }@using（Html.BeginForm（文件上传，家，FormMethod.Post，
                       新{ENCTYPE =的multipart / form-data的}））
   {
   ＆LT; D​​IV＆GT;
   名字＆LT; BR /＆GT;
   @ Html.TextBox（其中fname）＆LT; BR /＆GT;
   姓＆LT; BR /＆GT;
   @ Html.TextBox（L-NAME）＆LT; BR /＆GT;
   图片＆LT; BR /＆GT;
   ＆LT;输入类型=文件名称=文件ID =文件的风格=宽度：100％; /＆GT; ＆LT; BR /＆GT;
   ＆LT;输入类型=提交值=上传级=提交/＆GT;
   ＆LT; / DIV＆GT;
   }
    




5. 显示查看

     @ {
       ViewBag.Title =显示;
   }@ {
      test2.Database1Entities DB =新test2.Database1Entities（）;
   }
   @using（Html.BeginForm（））
   {
   ＆LT;表边框=1＆GT;
   ＆LT;＆THEAD GT;
       ＆所述; TR＆GT;
           ＆LT;第i个图像和LT; /第i
           百分位＆gt;首先名称和LT; /第i
           ＆LT;第i个姓＆LT; /第i
       ＆LT; / TR＆GT;
   ＆LT; / THEAD＆GT;
   ＆LT;＆TBODY GT;
       @foreach（在db.tblAs VAR项）
       {
           ＆所述; TR＆GT;
               ＆所述; TD＆GT;＆下; IMG SRC =~/images/@item.imageUrl宽度=100HEIGHT =100/＆GT;＆下; / TD＆GT;
               ＆LT; TD＆GT; @ item.fname＆LT; / TD＆GT;
               ＆LT; TD＆GT; @ item.lname＆LT; / TD＆GT;
           ＆LT; / TR＆GT;
       }
   ＆LT; / TBODY＆GT;
   ＆LT; /表＆gt;
   }
    

输出：的

/主页/ 的

/家庭/显示/ 的

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