Question

我正在尝试使用Ajax表单保存图像。但无法在我的操作中获取上传的图像。这是我的索引页面，在这个页面中我正在加载添加项目的部分视图。我的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" />
}

我找到了同一类型问题的链接，但在我的情况下，它无法正常工作

Upload file using Ajax form

Answer 1

只使用Ajax.BeginForm 而没有额外的js脚本，这是不可能的加载文件，这些文件已在您的链接中提供，我无法在您的代码中看到它。无论如何我强烈建议使用{{3出于这样的目的。

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方法，并使用（$（＆＃34;＃frmUploader＆＃34;）。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>

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

3 个答案: