@ Html.EditorFor（图片）

Question

我试图允许用户将图像上传到我们的网站，我不太确定如何使用它。 我曾尝试使用多种类型来定义图像，包括System.Drawing.Image和HttpPostedFileWrapper但@Html.EditorFor总是（可以理解）将其属性作为要编辑的字段。

在我看来，我确实有，而不是@Html.EditorFor我确实有<input type="file" name="imageToUpload" />但它没有作为Model一部分进入我的视图？ 我对MVC很陌生，所以我希望它是微不足道的。

这是我的观点：

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>New Image</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Description)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Description)
            @Html.ValidationMessageFor(model => model.Description)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Image)
        </div>
        <div class="editor-field">
            <input type="file" name="imageToUpload" />
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

我的控制器：

    [HttpPost]
    public ActionResult CreateImage(string brand, string collection, ImageEditViewModel imageEditViewModel)
    {
        string fileName = Guid.NewGuid().ToString();
        string serverPath = Server.MapPath("~");
        string imagesPath = serverPath + String.Format("Content\\{0}\\Images\\", Helper.Helper.ResolveBrand());

        string newLocation = Helper.Helper.SaveImage(fileName, imagesPath, imageEditViewModel.Image.InputStream)

        Image image = new Image
        {
            Collection = ds.Single<Collection>(c => c.Season == collection
                && c.Brand.Name == brand),
            Description = imageEditViewModel.Description,
            Location = "newLocation",
            Order = Helper.Helper.GetImageOrder(brand, collection)
        };

        ds.InsertOnSubmit<Image>(image);
        ds.SubmitChanges();

        return RedirectToAction("Brand");
    }

最后是ViewModel：

public class ImageEditViewModel
{
    public int CollectionId { get; set; }

    public string Description { get; set; }

    public HttpPostedFileWrapper Image { get; set; }

    public int Order { get; set; }
}

Answer 1

确保在enctype="multipart/form-data"上指定正确的enctype="multipart/form-data" ，否则您将无法上传文件：

@using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>New Image</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Description)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Description)
            @Html.ValidationMessageFor(model => model.Description)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.ImageToUpload)
        </div>
        <div class="editor-field">
            <input type="file" name="imageToUpload" />
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

如果您想使用EditorFor帮助程序生成文件输入，您可以使用以下内容：

<div class="editor-label">
    @Html.LabelFor(model => model.ImageToUpload)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.ImageToUpload)
</div>

然后为HttpPostedFileBase类型定义自定义编辑器模板（请参阅下文，您需要修改模型以实际使用此类型）。 所以~/Views/Shared/EditorTemplates/HttpPostedFileBase.cshtml的编辑器模板：

@model HttpPostedFileBase
@Html.TextBox("", null, new { type = "file" })

在您的视图模型上使用HttpPostedFileBase类型，并确保该属性的名称与您在表单上输入的文件的名称相匹配：

public class ImageEditViewModel
{
    public int CollectionId { get; set; }

    public string Description { get; set; }

    public HttpPostedFileBase ImageToUpload { get; set; }

    public int Order { get; set; }
}

另外，请务必查看以下博客文章 。