Question

我有一个表单来添加联系人，在该表单中我想上传联系人的图像以及其他信息，如姓名，地址，公司名称等。那么我该如何添加该图像并将图像信息存储到数据库。这是我的html表单，根据这个将是Controller ..

@using (Html.BeginForm("", "", FormMethod.Post, new { id = "saveContact", enctype = "multipart/form-data" }))
{
<div class="rowElem noborder">
                <label>
                    First name :</label><div class="formRight"><input type="text" id="firstName" name="firstName" value ="@Model.FirstName" style="width: 600px; height:25px;font-size: 16px;" /></div>
                <div class="fix">
                </div>
</div>
<div class="rowElem">
                <label>
                    Upload Image :</label><div class="formRight"><input type="file" id="imageUpload" name="imageUpload" /></div>
                <div class="fix">
                </div>
            </div>
<input type="submit" id="btnAddContact" value="Save" />

Answer 1

您可以首先定义一个模拟表单输入字段的视图模型：

public class ContactViewModel
{
    [DisplayName("First name :")]
    [Required]
    public string FirstName { get; set; }

    [DisplayName("Upload Image :")]
    [Required]
    public HttpPostedFileBase ImageUpload { get; set; }
}

然后让您的控制器操作将此视图模型作为参数：

[HttpPost]
public ActionResult Save(ContactViewModel model)
{
    ...
}

当然，根据您使用的数据访问技术，可能有不同的方法将联系人保存到数据库。例如，如果您使用普通的ADO.NET，则可以使用一种方法来执行保存：

public int SaveContact(string firstName, byte[] photo)
{
    using (var conn = new SqlConnection("YOUR CONNECTION STRING COMES HERE"))
    using (var cmd = conn.CreateCommand())
    {
        conn.Open();
        cmd.CommandText = "INSERT INTO Contacts (FirstName, Photo) VALUES (@firstName, @photo)";
        cmd.Parameters.AddWithValue("@firstName", firstName);
        cmd.Parameters.Add("@photo", SqlDbType.BigInt, 20).Value = photo;
        return cmd.ExecuteNonQuery();
    }
}

然后在你的控制器动作中你可以调用这个方法：

[HttpPost]
public ActionResult Save(ContactViewModel model)
{
    if (!ModelState.IsValid)
    {
        return View(model);
    }

    using (var stream = new MemoryStream())
    {
        model.ImageUpload.InputStream.CopyTo(stream);
        byte[] photo = stream.ToArray();
        SaveContact(model.FirstName, photo);
        return RedirectToAction("Index");
    }
}

此外，我建议您在视图中使用HTML帮助程序来生成输入字段，而不是对其进行硬编码：

@model ContactViewModel
@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "saveContact", enctype = "multipart/form-data" }))
{
    <div class="rowElem noborder">
        @Html.LabelFor(x => x.FirstName)
        <div class="formRight">
            @Html.TextBoxFor(x => x.FirstName, new { style = "width: 600px; height:25px;font-size: 16px;" })
            @Html.ValidationMessageFor(x => x.FirstName)
        </div>
       <div class="fix"></div>
    </div>
    <div class="rowElem">
        @Html.LabelFor(x => x.UploadImage)
        <div class="formRight">
            @Html.TextBoxFor(x => x.ImageUpload, new { type = "file" })
            @Html.ValidationMessageFor(x => x.ImageUpload)
        </div>
        <div class="fix"></div>
    </div>
    <input type="submit" id="btnAddContact" value="Save" />    
}

更新：

如果您不想遵循我关于使用视图模型的建议并直接将您的域模型传递给视图，并且您没有ImageUpload属性并且您无法修改它，您仍然可以执行以下控制器操作签名：

[HttpPost]
public ActionResult Save(Contact model, HttpPostedFileBase imageUpload)
{
    ...
}

如何上传表单中的图像

1 个答案: