试图允许用户上传文件； 文件为“空”（ASP.Net / MVC / C＃）

Question

我有一个带有表单的页面，该表单允许用户选择要上传的图像（我的模型中为DefectImage ）。 不幸的是，即使我肯定选择了一个文件，在控制器中， DefectImage以“空” DefectImage出现。 在我点击“提交”之前，文本框甚至显示了文件名。

模型

public class CreateReportViewModel
{
    [Required]
    [Display(Name = "Description")]
    [StringLength(500)]
    public string Description { get; set; }

    [Required]
    [Display(Name = "Electrode Image")]
    public HttpPostedFileBase DefectImage { get; set; }

}

视图

@using (Ajax.BeginForm("createreport", "wip", new { id = ViewBag.Id, enctype = "multipart/form-data" }, ajaxOpts, new { @id = "form-create" }))
{

    <div class="form-group row">
        @Html.LabelFor(m => m.Description, new { @class = "col-sm-4 text-sm-right" })
        <div class="col-sm-6 col-md-5">
            @Html.TextAreaFor(m => m.Description, new { @class = "form-control form-control-sm" })
            <p>
                @Html.ValidationMessageFor(m => m.Description)
            </p>
        </div>
    </div>

<div class="form-group row">
    @Html.LabelFor(m => m.DefectImage, new { @class = "col-sm-4 text-sm-right" })
    <div class="col-sm-6 col-md-5">
        @Html.TextBoxFor(m => m.DefectImage, new { type = "file", @class = "form-control form-control-sm" })
        <p>
            @Html.ValidationMessageFor(m => m.DefectImage)
        </p>
    </div>
</div>

    <div class="row form-group-buttons">
        <div class="col-sm-8 col-sm-offset-4">
            <button id="btn-submit" type="submit" class="btn btn-sm btn-success">Submit</button>
        </div>
    </div>
}

调节器

[HttpPost]
public ActionResult CreateReport(CreateReportViewModel model)
{
    GenericResultModel jsonResponse = new GenericResultModel();

    if (ModelState.IsValid)
    {
        byte[] uploadedImage = new byte[model.DefectImage.InputStream.Length];
        model.DefectImage.InputStream.Read(uploadedImage, 0, uploadedImage.Length);

        try
        {
            // send file to DB
            jsonResponse.IsOK = true;
        }
        catch
        {
            // Exception
            jsonResponse.IsOK = false;
        }
    }
    return Json(jsonResponse, JsonRequestBehavior.AllowGet);
}

当我逐步执行时，控制器中的ModelState.IsValid评估为false因为出于某种原因我的文件（必需）为null 。 Description通过，但不是DefectImage 。

我在这里想念什么？

Answer 1

您的enctype放置在错误的位置-您已将其放在路由值中，但这是HTML属性。

所以：

@using (Ajax.BeginForm("createreport", "wip",
    new { id = ViewBag.Id, enctype = "multipart/form-data" },
    ajaxOpts,
    new { @id = "form-create" }))

应该：

@using (Ajax.BeginForm("createreport", "wip",
    new { id = ViewBag.Id },
    ajaxOpts,
    new { @id = "form-create", enctype = "multipart/form-data" }))

Answer 2

@Johnny是正确的，但这只是问题的一部分。 必须使用AJAX以非常特殊的方式提交文件，而AJAX帮助器不支持此功能。 另外，您需要记住，通常，现代浏览器仅支持AJAX上传，这意味着IE 9及以下版本无需应用。

要进行AJAX上传，您需要执行以下操作：

document.getElementById('MyForm').addEventListener('submit', function (e) {
    e.preventDefault();
    var form = this;

    var formData = FormData(form);

    var files = document.getElementById('MyFileInput').files;
    for (var i = 0; i < files.length; i++)
    {
        formData.append('files[]', files[i], files[i].name);
    }

    var xhr = new XMLHttpRequest();
    xhr.open('POST', form.action, true);
    xhr.onload = function () {
        if (xhr.status === 200) {
          // File(s) uploaded.
        } else {
          alert('An error occurred!');
        }
    };
    xhr.send(formData);
});