Question

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

这就是我的表单的样子：

表单将提交给此操作：

[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>

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

经过一个小时的研究，我已经读过，除非使用iframe，否则通过使用Ajax传统地发布文件是不可能的（？））。我不确定我的行为是什么，我有点想避免使用插件，所以我想知道是否有一些＆＃34; hacky＆＃34;直接从我的表单访问文件的方法？

这是我的表格：

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

Answer 1

不幸的是，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);
        }
    });

});

Answer 2

看起来像$.ajax需要contentType: false，以防止插入错误的内容类型标头。

另外，如果我正在正确阅读文档（https://api.jquery.com/serialize/）。序列化会跳过文件输入...

这个答案似乎也很有用How can I upload files asynchronously?

Jquery ajax表单提交包含文件

2 个答案: