Question

我是ASP.Net的新手（以及一般的webdev），我试图实现一个提供类似CV功能的网站。其中一件事就是上传和查看一个人的CV照片。使用脚手架和SO: Uploading/Displaying Images in MVC 4处找到的代码示例，我设法得到以下代码，其中有问题的部分用更大的空间包围：

<div class="form-horizontal">
<h4>Author</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.HiddenFor(model => model.PersonID)
<div class="form-group">
    @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
    </div>
</div>
<div class="form-group">
    @Html.LabelFor(model => model.Picture, htmlAttributes: new { @class = "control-label col-md-2" })

    <div class="col-md-10">            
        @using (Html.BeginForm("FileUpload", "CV", FormMethod.Post, new { enctype = "multipart/form-data" }))
         {
             <input type="file" name="file" id="file" style="width: 100%;" />
             <br/>
             <input type="submit" value="Upload" class="submit" />
         }
    </div>

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

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

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

这是负责上传的视图的相关部分，而我想要处理请求的Controller CV 中的方法是这样的：

    [HttpPost]
    public ActionResult FileUpload(HttpPostedFileBase file)
    {
        if (file != null)
        {
            string pic = System.IO.Path.GetFileName(file.FileName);
            string path = System.IO.Path.Combine(
                                   Server.MapPath("~/Content/Images"), pic);
            // file is uploaded
            file.SaveAs(path);

            // save the image path path to the database or you can send image 
            // directly to database
            // in-case if you want to store byte[] ie. for DB
            using (MemoryStream ms = new MemoryStream())
            {
                file.InputStream.CopyTo(ms);
                byte[] array = ms.GetBuffer();
                //now I only have 1 mock author
                db.Authors.FirstOrDefault().Picture = array;
            }

        }
        // after successfully uploading redirect the user
        return View();
    }

我的问题是，尽管指定了Action和Controller名称且VS能够将View连接到{{Controller，但该帖子由于某种原因从未达到此方法1}}（至少它在Go To Controller命令上滑动到适当的一个）。我确定这是一个新手的错误，但我似乎无法找到原因。

Answer 1

您问题中的代码未显示，但您在<form>元素之前和之后拥有表单控件的事实表明您有一个外部<form>元素，并解释了为什么您的内部{{1} } dos没有点击<form>方法。

嵌套表单是无效的html，不受支持。无法保证不同浏览器或版本中的行为，但大多数浏览器为内部表单的成功表单控件生成名称/值对，但将其发布到外部表单的FileUpload()属性。

不清楚为什么要单独上传文件，这意味着如果用户在其他表单控件中输入数据并提交内部表单，则所有这些都将丢失。删除内部表单并将整个模型（包括文件输入）回发到一个控制器方法（通过向该方法添加action参数或更好，使用具有{{1的视图模型）将更容易属性）。请注意，表单需要HttpPostedFileBase file属性。

如果你想单独上传，那么一个选项就是使用ajax使用HttpPostedFileBase File将文件输入提交给控制器，这样至少用户已输入的任何数据都不会丢失。有关示例，请参阅How to append whole set of model to formdata and obtain it in MVC 。在您的情况下，您将初始化enctype = "multipart/form-data"的新实例和FormData输入文件的值。

作为旁注，您的FormData不会创建与文件输入相关联的标签（您没有.append()的表单控件）

ASP.Net MVC：图片上传不起作用

1 个答案: