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