Asp.net mvc MVC5 Ajax.begin带文件的上传表单

我读了一些文章，这些文章无法使用

Ajax.BeginForm

保存文件

我在MVC5中有一个表单，它使用了

Ajax.beginnform

，因此用户可以在不刷新页面的情况下获得一个响应良好的应用程序

现在，需要添加4个保存文件的字段（文件上载）

也请阅读，也许使用

jquery.form.js

这是可能的

所以我的问题是关于其他方法，这是否有意义：

表单保留

Ajax.BeginForm

用户在表单中输入数据

当用户需要将一个文件加载到表单中时，我正在考虑动态地将该文件上载到服务器并临时存储在那里

保存表单时，在服务器端我可以获取临时文件，然后保存它们

---

请检查以下代码以单独保存表单数据和文件上载：

使用Ajax.begin查看

@使用（Ajax.BeginForm（“，”），新的ajaxOption
{
HttpMethod=“POST”，
}，新的{@id=“UploadFileForm”，@class=“form horizontal”}）
{
浏览
支持的格式.doc、.docx、.pdf
添加
}

您不能将MVC Ajax助手用于文件上载。 相反，您可以在正常的

Html.BeginForm（）

上使用

例如：

<form id="myForm" url="/Home/Upload" method="post" enctype="multipart/form-data">
    <label>File</label>
    <input name="file" type="file" />
</form>

<script>
    function bindAjaxForm(selector, onComplete, beforeSerialize) {
        var form = $(selector);
        $.validator.unobtrusive.parse(selector);
        form.data("validator").settings.submitHandler = function (frm) {
            $(frm).ajaxSubmit({
                beforeSerialize: function ($form, options) {
                    if (typeof (beforeSerialize) === "function") {
                        beforeSerialize($form, options);
                    }
                },
                complete: function (response, statusText) {
                    if (typeof onComplete === "function") {
                        onComplete(response, statusText);
                    }
                }
            });
        }
    };

    bindAjaxForm("#myForm", function(data, status) {
        alert("complete");
        console.log(arguments);
    });
</script>

加上这个

  $("body").on("submit", "#frmAddProduct", function (e) {
            var form = e.target;
            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 ($("#frmAddProduct").valid()) { xhr.send(new FormData(form)); }
            } return true;
        });

---

不能使用

Ajax.BeginForm（）

上载文件。但是，您可以将

$.ajax（）

与

FormData一起使用
FormData
-reference（但不清楚为什么要分别发布文件和表单数据）@StephenMuecke谢谢，这意味着我可以使用$.ajax和FormData同时上传表单数据和上传文件？当然-
var FormData=new FormData（$（'form'）。get（0））
将序列化表单控件，包括文件输入。您只需要根据链接设置正确的ajax选项。谢谢，当此方法工作时，如何指定targetId和insertionMode.Replace，以便将返回的partialView插入到特定的div中。我已经编辑了答案。您必须手动处理AJAX响应。
  $("body").on("submit", "#frmAddProduct", function (e) {
            var form = e.target;
            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 ($("#frmAddProduct").valid()) { xhr.send(new FormData(form)); }
            } return true;
        });