ASP.NET MVC中Ajax形式的FileUpload部分视图不工作

Question

我上传了两个文件，用于在从用户配置文件页面调用的部分视图中编辑用户配置文件。问题是作用方法中的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

文件上传通常使用简单的表单post启动。如果你想使用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>

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

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

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