Question

我正在使用Javascript和jQuery的组合来创建一个FormData对象，以通过AJAX请求发送表单数据。这是我的原始代码：

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

我的问题是找到一种简洁的方法来排除.not(':visible')对象收集的数据中的不可见（即FormData）元素。我知道我可以使用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);

Answer 2

FormData有一个delete method。因此，您可以遍历用于创建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);
    }
});

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

2 个答案: