将表单对象注入 FormData 构造函数时如何排除某些输入字段？

Question

  $('#rewardForm').submit(function(e) {
        e.preventDefault()
        var formData = new FormData($('input[name!="files[]"]', $(this)[0]))
        console.log(formData);;
  })

我想排除名称等于“files[]”的输入字段。然后将表单对象注入到FormData()中。我应该怎么办？

Answer 1

你应该考虑使用FormData.delete()

这样您就可以从formData对象中删除指定的字段。

在您的示例中，您可以使用：formData.delete('files');

尝试运行下面的代码片段或查看此CodePen 演示

$(document).ready(() => {
  $("#rewardForm").submit(e => {
    e.preventDefault();
    var formData = new FormData($("#rewardForm")[0]);

    // add fields here that you want to remove
    formData.delete('files');
    formData.delete('last_name');

    // Display the key/value pairs (this is how you debug a formData object)
    for (var pair of formData.entries()) {
      console.log(`name: ${pair[0]}, value: ${pair[1]}`);
    }
  });

});

.container {
  background: #333;
  color: #fff;
}

.form-control {
  margin: 0.5rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='container'>
  <h3>Form with removed fields</h3>
  <form action="#" id="rewardForm">
    <input type="text" placeholder='First Name' class='form-control' name='first_name'>
    <input type="text" placeholder='Last Name' class='form-control' name='last_name' />
    <input type="text" placeholder='Profession' class='form-control' name='profession' />
    <input type="file" class='form-control' name='files' />
    <input type="submit" class='form-control btn btn-success' />
  </form>
</div>