Javascript 从FormData对象中排除不可见的表单元素

我使用Javascript和jQuery的组合来创建

FormData

对象，通过AJAX请求发送表单数据。这是我的原始代码：

// $form is a jQuery object of the form in question
var formData = new FormData($form[0]);

我的问题是找到一种简洁的方法从

FormData

对象收集的数据中排除不可见（即

.not（“：visible”）

元素。我知道使用jQuery的

serialize（）

方法可以很容易地做到这一点，但由于上载了图像文件，我需要在这个特定的实例中使用

FormData

我实现这一目标的唯一方法是使用以下代码：

// $form is a jQuery object of the form in question
// Clone the original form
var $formClone = $form.clone();

// Remove invisible items from form
$form.find('input, textarea').not(':visible').remove();

// Collect form data with invisible items removed
var formData = new FormData($form[0]);

// Replace form with cloned form which retains invisible elements
$form.replaceWith($formClone);

我不能简单地从克隆中删除不可见的元素并将其传递给FormData，因为除非我将克隆附加到DOM以便删除所有数据元素，否则任何克隆都不可见。因此，我唯一的解决方案是克隆原始表单，并保留克隆以在从原始表单中删除不可见元素后重新连接到DOM

---

我担心使用这种方法不是很有效。有没有更简单的方法来实现这一点？

正如@anthonyGist在评论中指出的，将不可见元素设置为禁用：

$(':hidden').prop('disabled', true);

FormData具有一个。因此，您只需遍历用于创建FormData的表单中的隐藏/禁用字段，并删除对象中不需要的字段：

// $form is a jQuery object of the form in question
var formData = new FormData($form[0]);
form.find(':disabled, :not(:visible)').each(function(i, field) {
    var fname = $(field).attr('name');
    if(fname) {
        payload.delete(fname);
    }
});

---

您可能只需将不可见的元素设置为禁用（

$form.find（'input，textarea'）。not（'：visible'）。prop（'disabled'，true）；

），这样就不必克隆表单、删除元素，然后再次替换它。如果

FormData

包含禁用的输入元素，我会感到惊讶。这是一个非常好和有用的方法，但它禁用了我页面上的css、js链接。你知道如何防止这种情况发生吗。