ASP.NET MVC 部分视图中的 Ajax 表单中的文件上传不起作用

Question

我有 2 个文件上传，用于在从用户个人资料页面调用的部分视图中编辑用户个人资料。问题是动作方法中的HttpPostedFileBase参数总是null。

当我在个人资料页面之外调用此部分视图并且没有布局时，文件上传已成功完成并将文件发送到操作方法。

这是我在控制器中的操作方法：

[AcceptVerbs(HttpVerbs.Post)]
[Authorize(Roles = "User")]
public ActionResult EditProfile(ProfileGeneralDescription editedModel,
                                   HttpPostedFileBase imageFile,
                                   HttpPostedFileBase coverFile)
{
         //Some code here...   
}

这是我的部分观点cshtml代码：

@model Website.Models.ViewModel.Profile

@using (Ajax.BeginForm("EditProfile", "Profile", new { postOwnerUser = User.Identity.Name }, new AjaxOptions()
{
    HttpMethod = "POST",
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "GeneralSection"
}, new { enctype = "multipart/form-data" }))
{

    <div>
        <button type="submit" name="Save" class="btn btn-default btn-xs">Save Changes</button>
        @Ajax.ActionLink("Cancel", "ProfileDescription", "Profile",
            new {username = Model.Username, type = "Show"},
            new AjaxOptions()
            {
                HttpMethod = "GET",
                InsertionMode = InsertionMode.Replace,
                UpdateTargetId = "GeneralSection"
            },
            new {@class = "btn btn-default btn-xs"})
    </div>

    <input type="hidden" name="username" id="username" value="@Model.Username"/>

    <fieldset>
        <legend>Edit Photos</legend>
        <div>
            Select profile picture:
            <input id="imageFile" type="file" name="imageFile" accept="image/png, image/jpeg" />
            @Html.CheckBoxFor(modelItem => modelItem.DefaultCover)<span>Remove profile photo</span>
        </div>
        <div>
            Select cover picture:
            <input id="coverFile" type="file" name="coverFile" accept="image/png, image/jpeg" />
            @Html.CheckBoxFor(modelItem => modelItem.DefaultCover)<span>RemoveCover</span>
        </div>
    </fieldset>
}

我的错误在哪里？
提前致谢。

Answer 1

文件上传通常使用简单的表单发布来启动。如果要使用 AJAX 发起上传，则需要编写一些 javascript 来使用 XmlHttpRequest (XHR) 对象，如下所示（使用 jQuery）：

<script>
    function submit (e){
        e.preventDefault = true;
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(e) {
            if ( 4 == this.readyState ) {
                console.log(['xhr upload complete', e]);
            }
        };
        xhr.open('post', 'Profile/EditProfile', true);
        xhr.setRequestHeader("Content-Type","multipart/form-data");
        var formData = new FormData();
        formData.append("imageFile", $("#imageFile").files[0]);
        formData.append("coverFile", $("#coverFile").files[0]);
        // etc
        xhr.send(formData);
    };
</script>

请注意，您使用表单元素中的值在代码中填充 javascript FormData 对象。然后将此函数连接到提交按钮的点击事件：

    <button type="button" name="Save" onclick="submit()" class="btn btn-default btn-xs">Save Changes</button>

您还可以删除视图中的 Ajax 表单，因为使用此方法时不需要它。