在MVC 4中使用Ajax.BeginForm保存图像

Question

我正在尝试使用Ajax表单保存图像。 但是我无法获取上传的图片。 这是我的索引页面，在此页面中，我正在加载Add Item的partialview。 我的Index.Cshtml

@Html.Action("_AddOrUpdateItem","Admin")

我的动作代码

public PartialViewResult _AddOrUpdateItem(int? itemId)
        {
           //Some Code Here 
            return PartialView("_AddItem", item);
        }

        [HttpPost]
        public PartialViewResult AddOrUpdateItem(ToolItem toolItem, HttpPostedFileBase toolItemImage)
        {
           ////Some Code Here
            return PartialView("_AddItem", toolItem);
        }
    }

我的ajax形式如下

@using (Ajax.BeginForm("AddOrUpdateItem", "Admin", new AjaxOptions() { HttpMethod = "POST" }, new { enctype = "multipart/form-data" }))
{
  // Some more text boxes here
  <input type="file" id="ToolItemImage" name="toolItemImage" />
  <input type="submit" value="Save" />
}

我有一个针对此类问题的链接，但就我而言，它不起作用

使用Ajax表单上传文件

Answer 1

在链接中提供了没有附加js脚本的情况下 ，仅使用Ajax.BeginForm加载文件是不可能的，我也无法在您的代码中看到它。无论如何，我强烈建议您使用Jquery Form Plugin来实现此目的。

Answer 2

我不知道ASP MVC，但是要使用文件提交表单，您必须使用enctype="multipart/form-data">

所以你的表格一定有这样的东西

<form action"your controller" method="post" enctype="multipart/form-data">
<input type="file" id="ToolItemImage" name="toolItemImage" />
<input type="submit">
</form>

Answer 3

保存Ajax.Begien表单图像保存此Jquery方法，并使用以下代码行（$（“＃frmUploader”）。valid（））检查表单的有效性。

  @using (Ajax.BeginForm("Create", "Employee", new AjaxOptions()
        {
            OnBegin = "startBLoading",
            OnComplete = "stopBLoading",
            OnSuccess = "OnSuccessI"
        }, new { enctype = "multipart/form-data", id = "frmUploader" }))
        {
<div class=row>
..... Enter the Page View Desgine.....

<button type="submit" class="btn btn-product text-capitaliz">Create</button>
</div>
}
<script type="text/javascript">
 window.addEventListener("submit", function (e) {
        debugger

        if ($("#frmUploader").valid()) {
            var form = e.target;
            if (form.getAttribute("enctype") === "multipart/form-data") {
                if (form.dataset.ajax) {
                    e.preventDefault();
                    e.stopImmediatePropagation();
                    var xhr = new XMLHttpRequest();
                    xhr.open(form.method, form.action);
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            if (form.dataset.ajaxUpdate) {
                                var updateTarget = document.querySelector(form.dataset.ajaxUpdate);
                                if (updateTarget) {
                                    updateTarget.innerHTML = xhr.responseText;
                                }
                            }
                        }
                    };
                    xhr.send(new FormData(form)

                    );

                }

            }
            OnSuccessI();
        } else {
            e.preventDefault();
        }
    },

        true
    );
</script>