多个属性 Html.BeginForm MVC id 和 enctype 作为文件上传的一部分答案

【问题标题】：Multiple Attributes Html.BeginForm MVC id and enctype as part of file upload多个属性 Html.BeginForm MVC id 和 enctype 作为文件上传的一部分
【发布时间】：2015-11-09 14:28:06
【问题描述】：

作为文件上传 (ASP.NET MVC3) 的一部分，将 id 和 enctype 属性添加到 HTML.BeginForm 返回 HttpPostedFileBase 为 null

型号：

public class ProfileModel
{
 [UIHint("Upload")]
 public HttpPostedFileBase ImageUpload { get; set; }
}`

ProfileForm.cshtml

@using (Html.BeginForm("Update", "Profile", new { ProfileId = ViewBag.ProfileID }, FormMethod.Post, new { @enctype = "multipart/form-data", @id = "ProfileForm" }))
{

    <div>
        @Html.LabelFor(model => Model.ImageUpload)
        @Html.TextBoxFor(model => Model.ImageUpload, new { type = "file" })
    </div>
    <div class='buttons'>
        <input type="submit"  value='Save' />
    </div>
}

控制器

public Upload(ProfileModel viewModel)
{
  if (viewModel.ImageUpload != null && viewModel.ImageUpload.ContentLength > 0)
 {
   var uploadDir = "~/uploads";
   var imagePath = Path.Combine(Server.MapPath(uploadDir), viewModel.ImageUpload.FileName);
   var imageUrl = Path.Combine(uploadDir, viewModel.ImageUpload.FileName);
   viewModel.ImageUpload.SaveAs(imagePath);
   }
}

如果我删除@id = "ProfileForm" 属性，如下所示，我将获得 HttpPostedFileBase (ImageUpload) 值。

@using (Html.BeginForm("Update", "Profile", new { ProfileId = ViewBag.ProfileID }, FormMethod.Post, new { @enctype = "multipart/form-data"}))
{  }

我需要同时传递 id 和 enctype - 谁能告诉我我做错了什么或者有更好的方法吗？

【问题讨论】：

什么意思我需要传递id？使用new { @id = "ProfileForm" } 是向表单添加id 属性。它没有“通过”任何东西
感谢您纠正 Stephen，从技术上讲，如果将新的 {@id="ProfileForm"} 添加到 Html.BeginForm () 它将解析为具有 id 属性的 Form 元素。
您的代码对我来说很好用。但是有什么理由需要给表单一个id 属性吗？为什么你有[UIHint("Upload")]（你没有使用EditorFor()所以它只是被忽略了）。另请注意，您将 ProfileID 添加为将回发的路由参数 - 我假设您的模型还包含一个名为 ProfileID? 的属性
谢谢斯蒂芬，我找到了问题。单击提交按钮时，我正在序列化无法将图像序列化为模型一部分的表单数据。

标签： asp.net-mvc model-view-controller multipartform-data enctype

【解决方案1】：

在浪费了很多时间之后，我觉得它对你有帮助。就用这个

@using (Html.BeginForm("Update", "Profile", new { @id = "ProfileForm" }, FormMethod.Post, new { @enctype = "multipart/form-data",  }))

你的 id 将在那里 new { @id = "ProfileForm" }

【讨论】：

【解决方案2】：

尝试从 id 和 enctype 中删除 @

【讨论】：

我在下面尝试过，但图像上传值仍然为空：1. 'Removed @ from -- new { id = "ProfileForm", enctype = "multipart/form-data"}' 2.删除 @ & enctype -- new { id = "ProfileForm"}

【解决方案3】：

我已通过以下操作解决了该问题： - 单击提交时，我首先通过调用以下方法单独放置图像

 function FileUploadClick() {

            var formData = new FormData();
            var totalFiles = document.getElementById("FileUpload").files.length;
            for (var i = 0; i < totalFiles; i++) {
                var file = document.getElementById("FileUpload").files[i];

                formData.append("FileUpload", file);
            }

            $.ajax({
                type: "POST",
                url: '/Profile/Upload',
                data: formData,
                dataType: 'json',
                contentType: false,
                processData: false,
                success: function (response) {
                    alert('succes!!');
                },
                error: function (error) {
                    alert("errror");
                }
            });
        }

function Submit() {

    $("#ProfileForm").submit(function (e) {
        FileUploadClick();
        var url = "/Profile/Update";
        $.post(url, $("#ProfileForm").serialize(), function (data) {

        });
    });
}

【讨论】：