上傳圖像/顯示並將其保存到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不再爲空，可以將其保存到磁盤，或獲取字節保存到數據庫中。