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

Question

我想上传一张图片并显示到数据库中。我有一个模型来添加 EmployeeFirstName、LastName 和员工形象。当我发布表单时，除了图像文件之外的所有数据都发布了。

这是我的代码。

型号：

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" />
}

然后，在您的控制器中，您可以简单地向您的 post 操作添加一个参数，该参数将自动获取文件，如下所示：

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

imageFile 不应再为 null，您可以将其保存到磁盘，或者获取要保存到数据库的字节。