使用“DataType.Upload”属性为属性生成文件上载输入?

时间:2014-02-14 06:18:01

标签: asp.net asp.net-mvc

我有以下视图模型。

public class MyViewModel
{
    [DataType(DataType.Upload)]
    public HttpPostedFileBase ImageUpload { get; set; }

    public int VenueId { get; set; }
    public virtual Venue Venue { get; set; }
    .... // other properties
}

我正在关注此页面http://cpratt.co/file-uploads-in-asp-net-mvc-with-view-models/以创建图片上传控件。这是视图代码。

@using (Html.BeginForm("Create", "Event", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()

   <div class="form-horizontal">
    <div class="form-group">
        @Html.LabelFor(model => model.VenueId, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.VenueId)
            @Html.ValidationMessageFor(model => model.VenueId)
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.ImageUpload, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.ImageUpload)
            @Html.ValidationMessageFor(model => model.ImageUpload)
        </div>
    </div>
}

但是,它会生成三个文本框而不是文件上传输入控件吗?以下Html代码。

<div class="col-md-10">
    <div class="editor-label"><label for="ImageUpload_ContentLength">ContentLength</label></div>
    <div class="editor-field"><input name="ImageUpload.ContentLength" class="text-box single-line" id="ImageUpload_ContentLength" type="number" value="" data-val-required="The ContentLength field is required." data-val-number="The field ContentLength must be a number." data-val="true"> <span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="ImageUpload.ContentLength"></span></div>
    <div class="editor-label"><label for="ImageUpload_ContentType">ContentType</label></div>
    <div class="editor-field"><input name="ImageUpload.ContentType" class="text-box single-line" id="ImageUpload_ContentType" type="text" value=""> <span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="ImageUpload.ContentType"></span></div>
    <div class="editor-label"><label for="ImageUpload_FileName">FileName</label></div>
    <div class="editor-field"><input name="ImageUpload.FileName" class="text-box single-line" id="ImageUpload_FileName" type="text" value=""> <span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="ImageUpload.FileName"></span></div>

    <span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="ImageUpload"></span>
</div>

3 个答案:

答案 0 :(得分:8)

将图像控件更改为

  @Html.TextBoxFor(m => m.ImageUpload, new { type = "file", name = "Files" })

答案 1 :(得分:1)

如何从模型中删除HttpPostedFileBase并将其作为第二个参数添加到控制器。

在你的html中,你会添加:

<input type="file" name="file" />

在您的控制器中,您可以:

[HttpPost]
public ActionResult thisController(Model myModel, HttpPostedFileBase file)
{ }

这应该会自动捕获您输入的任何文件。

答案 2 :(得分:0)

我有另一个主意。 如何从模型和控制器中删除HttpPostedFileBase呢?

在您的html中,您将添加:

 @using (Html.BeginForm("actionNameYouWriteToManupulate", "controllerYouWrite", FormMethod.Post, new { enctype = "multipart/form-data" }))
 {
   <input type="file" name="file" id="File1" />
   <input type="file" name="file" id="File2" />
   ...
   <input type="submit" value="Upload" class="btn btn-info" />
 }

根据需要在控制器中添加任意数量的文件:

var hfc = Request.Files;
for (int i = 0; i < hfc.Count; i++)
            {
                var hpf = hfc[i];
                if (hpf.ContentLength > 0)
                {
                   //Do what you want with files 
                   //Handler pointed to file is hpf for example :
                   hpf.SaveAs(Server.MapPath(fullPathWithFileName));
                 }
            }

希望有用。