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

Question

我正在结合使用 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。

我担心使用这种方法效率不高。有没有更简单的方法来实现这一目标？

Answer 1

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

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