当使用enctype =" multipart / form-data"返回Json结果时,Ajax成功函数不起作用

时间:2018-04-01 00:01:35

标签: jquery json ajax asp.net-mvc asp.net-ajax

我正在处理需要使用Popup表单上传文件的项目。问题是当我从控制器保存文件后返回JSON Action Result时,Ajax成功函数没有触发。

部分视图代码(弹出窗体)

@using (Html.BeginForm("save", "UploadFile", FormMethod.Post, new { id = "popupForm", enctype = "multipart/form-data" }))
{
    <div>
        <input type="file" id="file" name="file">
        <input class="popup btn btn-primary" type="submit" value="Save File" />
    </div>
}

JQuery代码

$('.popupWindow').on('submit', '#popupForm', function (e) {
    var url = $('#popupForm')[0].action;

    var files = $("#file").get(0).files;
    if (files.length > 0) {
        $('#popupForm').data.append("UploadedFile", files[0]);
    } 
    $.ajax({
        type: "POST",
        url: url,
        data: $('#popupForm').serialize(),
        datatype: "json",
        contentType: "application/json; charset=utf-8",
        processData: false,
        success: function (data) {
            if (data.status) {
                $dialog.dialog('close');
                oTable.ajax.reload();
                alert("File has been sucessfully saved");
            }
        }
    }) 
    e.preventDefault();
})

控制器代码

public ActionResult Save(HttpPostedFileBase file)
{
    try
    {
        bool status = false;
        var fileName = Path.GetFileName(file.FileName);
        var path = Path.Combine(Server.MapPath("~/App_Data/Files"), fileName);
        file.SaveAs(path);
        status = true;
        return new JsonResult { Data = new { status = status } };
    }
    catch(Exception exp)
    {
         return RedirectToAction("Index", "UploadFile");
    }
}

点击“提交”按钮。我在浏览器上得到以下输出

enter image description here

标题信息 Header Information

如何使用JSON Action Result触发Ajax成功函数? 感谢

0 个答案:

没有答案