包含文件的Jquery ajax表单提交

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

这是我的表单的外观：

该表格将提交给本次行动：

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

        return PartialView();
    }

除了总是导致

null

的

IEnumerable

之外，所有内容都是完美绑定的

我表格的文件部分是这样做的：

 <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

需要

contentType:false

来防止插入错误的内容类型标题

另外，如果我正确读取了docs（）.serialize跳过文件输入

---

这个答案似乎也很有用

不幸的是，jQuery

serialize（）

方法将不包括输入文件元素。因此，您的文件不会包含在序列化值中

您应该做的是创建一个

FormData

对象，将文件附加到该对象。您还需要将表单字段值附加到此同一FormData对象。您可以简单地循环所有输入字段并添加它。另外，在ajax调用中，需要将

processData

和

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);
        }
    });

});

---

下面是一个面向PHP的答案，它讨论了我添加的更多内容。我仍然得到空值。

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

$(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);
        }
    });

});