@ Html.EditorFor（Image）

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"); 
    } 

最后视图模型：

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"或你赢了无法上传文件：

@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; } 
} 

还请确保结帐following blog post。