上传图像/显示并将其保存到ASP.NET MVC4中的数据库

Question

我想上传图像并将其显示到数据库中。我有一个模型添加EmployeeFirstName，姓氏，...和员工形象。当我张贴表格除了图像文件发布的所有数据。

这是我的代码。

型号：

namespace EmployeeTask.Models 
{ 
    using System; 
    using System.Collections.Generic; 

    public partial class Employee 
    { 
     public int Id { get; set; } 
     public string FirstName { get; set; } 
     public string MiddleName { get; set; } 
     public string LastName { get; set; } 
     public string Department { get; set; } 
     public Nullable<System.DateTime> HiringDate { get; set; } 
     public byte[] Image { get; set; } 
    } 
} 

查看：

<div id="dialogEmployeeEditor"> 
<div> 
    <h2>Add/Edit Employee</h2> 
    <table> 
     <tr> 
      <td><a href="javascript:EmployeeEditor_Save();">Save</a></td> 
     </tr> 
    </table> 
</div> 

<div id="Container"> 
    <form id="frmEmployeeEditor"> 
     <table border="1"> 
      <tr> 
       <td>First Name</td> 
       <td> 
        <input type="text" name="FirstName" id="EmployeeEditor_FirstName" value="@emp.FirstName" /> 
       </td> 
      </tr> 
      ......... 

      <tr> 
       <td>Upload Image</td> 
       <td> 
        <input type="file" name="imageFile" id="image" /> 
       </td> 
      </tr> 
     </table> 
     <input type="hidden" name="employeeId" value="@emp.Id" /> 
    </form> 
</div> 
</div> 

<script type="text/javascript"> 
function EmployeeEditor_Save() { 
    $.post("/Employees/SaveEmployee", $("#frmEmployeeEditor").serialize(), function (e) { 

     $("#EmployeesGridContainer").replaceWith($(e)); 
     $("#PopUpContaine").dialog("close"); 
    }, "json"); 
} 
</script> 

控制器：

[HttpPost] 
public ActionResult SaveEmployee(int employeeId) 
{ 

     SaveEmployeeDate(employeeId,Request.Form); 
     return PartialView("_EmployeesGrid"); 
} 

public void SaveEmployeeDate(int employeeId, NameValueCollection Data) 
{ 
     Employee emp = db.Employees.FirstOrDefault(c => c.Id == employeeId); 

     if (emp == null) 
     { 
      emp = db.Employees.Create(); 
      db.Employees.Add(emp); 
     } 

     emp.FirstName = Data["FirstName"]; 
     emp.MiddleName = Data["MiddleName"]; 
     emp.LastName = Data["LastName"]; 
     emp.HiringDate = Convert.ToDateTime(Data["HiringDate"]); 
     emp.Department = Data["Department"]; 

     HttpPostedFileBase image = Request.Files["imageFile"]; 

     if (image != null && image.ContentLength > 0) 
     { 
      byte[] imageBytes = new byte[image.ContentLength]; 
      image.InputStream.Read(imageBytes, 0, image.ContentLength); 
      emp.Image = imageBytes; 
     } 

     db.SaveChanges(); 
} 

Answer 1

为了获得HttpPostedFileBase类型正确后，您需要添加enctype="multipart/form-data"到窗体标题。你可以只手动把它写成<form id="frmEmployeeEditor" enctype="multipart/form-data">，但我会建议使用MVC的形式助手做这样相同的事情（在你的CSHTML视图）：

@using (Http.BeginForm("Employee", "SaveEmployee", FormMethod.Post, new {enctype="multipart/form-data"}) 
{ 
    // Your form goes here 
    <input type="file" name="imageFile" id="image" /> 
} 

然后，在你的控制器，你可以简单地添加参数到您的文章的行动，将自动获得该文件，就像这样：

public ActionResult SaveEmployee(int employeeId, HttpPostedFileBase imageFile) 
{ 
    // Controller code here 
} 

imageFile不再为空，可以将其保存到磁盘，或获取字节保存到数据库中。