ASP.Net MVC：圖像上傳不起作用

Question

我是ASP.Net（和Webdev的新手）的新手，我正試圖實現一個提供類似CV功能的站點。 這樣的事情之一就是上傳和查看一個人的簡歷照片。 使用腳手架和在SO上找到的代碼示例：在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 （至少在“ Go To Controller命令上滑動至相應的View ） 。 我敢肯定這是菜鳥犯的錯誤，但是我似乎找不到原因。

Answer 1

您問題中的代碼沒有顯示它，但是實際上您在<form>元素之前和之后都具有表單控件，這表明您有一個外部<form>元素，並說明了為什么內部<form>不會點擊FileUpload()方法。

嵌套表單是無效的html，不受支持。 無法保證在不同的瀏覽器或版本中行為會如何，但是大多數瀏覽器會為內部表單的成功表單控件生成名稱/值對，但將其發布到外部表單的action屬性。

目前尚不清楚為什么要單獨上傳文件，這意味着如果用戶在其他表單控件中輸入數據並提交內部表單，那么所有這些都將丟失。 刪除內部表單並只將包括文件輸入在內的整個模型回發到一個控制器方法（通過向該方法添加HttpPostedFileBase file參數，或者最好使用帶有HttpPostedFileBase File屬性的視圖模型）會更容易。 請注意，表單將需要enctype = "multipart/form-data"屬性。

如果確實要單獨上傳，則一種選擇是使用Ajax使用FormData將文件輸入提交到控制器，這樣至少用戶已經輸入的任何數據都不會丟失。 有關示例，請參見如何將整個模型集附加到formdata並在MVC中獲取它 。 在您的情況下，您將初始化一個FormData的新實例，並使用.append()作為輸入文件的值。

附帶說明一下，您的@Html.LabelFor(model => model.Picture)不會創建與文件輸入關聯的標簽（您沒有帶有id="Picture"的表單控件）