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