Jquery ajax 表单提交包含文件

我有一个很长的表格，其中包含文件附件：

这就是我的表格的样子：

表单将提交至此操作：

[HttpPost]
public ActionResult AddReceivingConfirm(DTOreceiving entry,IEnumerable<HttpPostedFileBase> fileUpload)
    {

        return PartialView();
    }

通过ajax调用，即：

$(document).on('click', 'input[type="submit"].genericSubmit', function () {                    //generic function for ajax submit of ANY FORMS t

        if (!$("form#ValidateForm").valid()) {
                return false;
        };


        var frmData = $('.genericForm').serialize();
        var frmUrl = $('.genericForm').attr('action');
            $.ajax({
              type: 'post',
              url: frmUrl,
              data: frmData,

              success: function (e) {
                 $('#target').html(e);
             }
         });
         return false;
 });

一切都完美结合，除了IEnumerable<HttpPostedFileBase>这总是导致null,

我的表单的文件部分是这样完成的：

 <tr>
 <td>Attachment #1: </td>
 <td colspan="3">
     <input id="file1" type="file" name="fileUpload" />
 </td>

 </tr>

  <tr>
  <td>Attachment #2: </td>
 <td colspan="3">
     <input id="file2" type="file" name="fileUpload" />
 </td>

 </tr>

  <tr>
  <td>Attachment #3: </td>
 <td colspan="3">
     <input id="file3 "type="file" name="fileUpload" />
 </td>

 </tr>

我已经尝试过括号版本等，但它不会绑定。

经过一个小时的研究，我了解到不可能（？）通过使用 Ajax 传统地进行文件发布，除非使用 iframe。我不确定我的行动会是什么，我有点想避免使用插件，所以我想知道是否有一些“hacky”方法可以直接从我的表单访问文件？

这是我的表格：

using (Html.BeginForm("AddReceivingConfirm", "Wms", FormMethod.Post, new { id = "ValidateForm", @class = "genericForm" , enctype="multipart/form-data"}))

不幸的是 jQueryserialize()方法将不包含输入文件元素。因此您的文件不会包含在序列化值中。

你应该做的是创建一个FormData对象，将文件附加到该对象。您还需要将表单字段值附加到同一个 FormData 对象中。您可以简单地循环遍历所有输入字段并添加它。另外，在ajax调用中，您需要指定processData and contentType属性值至false.

$(document).on('click', 'input[type="submit"].genericSubmit', function(e) {

    e.preventDefault(); // prevent the default submit behavior.

    var fdata = new FormData();

    $('input[name="fileUpload"]').each(function(a, b) {
        var fileInput = $('input[name="fileUpload"]')[a];
        if (fileInput.files.length > 0) {
            var file = fileInput.files[0];
            fdata.append("fileUpload", file);
        }
    });

    // You can update the jquery selector to use a css class if you want
    $("input[type='text'").each(function(x, y) {
        fdata.append($(y).attr("name"), $(y).val());
    });

    var frmUrl = $('.genericForm').attr('action');
    $.ajax({
        type: 'post',
        url: frmUrl,
        data: fdata,
        processData: false,
        contentType: false,
        success: function(e) {
            $('#target').html(e);
        }
    });

});