FormDataコンストラクタにフォームオブジェクトを注入する際に、特定の入力フィールドを除外する方法は？

Question

$('#rewardForm').submit(function(e) { 
     e.preventDefault() 
     var formData = new FormData($('input[name!="files[]"]', $(this)[0])) 
     console.log(formData);; 
    }) 

「ファイル[]」と同じ名前の入力フィールドを除外したいと思います。フォームオブジェクトをFormData（）に挿入します。私は何をすべきか？

Answer 1

は、あなたは、あなたのformDataオブジェクトから指定したフィールドを削除することができますFormData.delete()

この方法を使用することを検討すべきです。あなたの例では

、あなたが使用することができます：formData.delete('files');

は以下のスニペットを実行してみてくださいまたは参照このCodePen Demo

$(document).ready(() => { 
 
    $("#rewardForm").submit(e => { 
 
    e.preventDefault(); 
 
    var formData = new FormData($("#rewardForm")[0]); 
 

 
    // add fields here that you want to remove 
 
    formData.delete('files'); 
 
    formData.delete('last_name'); 
 

 
    // Display the key/value pairs (this is how you debug a formData object) 
 
    for (var pair of formData.entries()) { 
 
     console.log(`name: ${pair[0]}, value: ${pair[1]}`); 
 
    } 
 
    }); 
 

 
});

.container { 
 
    background: #333; 
 
    color: #fff; 
 
} 
 

 
.form-control { 
 
    margin: 0.5rem; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class='container'> 
 
    <h3>Form with removed fields</h3> 
 
    <form action="#" id="rewardForm"> 
 
    <input type="text" placeholder='First Name' class='form-control' name='first_name'> 
 
    <input type="text" placeholder='Last Name' class='form-control' name='last_name' /> 
 
    <input type="text" placeholder='Profession' class='form-control' name='profession' /> 
 
    <input type="file" class='form-control' name='files' /> 
 
    <input type="submit" class='form-control btn btn-success' /> 
 
    </form> 
 
</div>

Answer 2

元の選択からname="files[]"との望ましくない入力を削除しているFormData（）コンストラクタに引数として結果を使用する.not()セレクタを適用する：

$('input',this).not('[name="files[]"]') 

（thisが$(this)[0]と同等である。）

編集：
FormData（）コンストラクタは<form>オブジェクトを想定しているので、それを生成することができます

$('<form>').append($('input',this).not('[name="files[]"]'))[0] 

FormData（）コンストラクタでこれを引数として使用する必要があります。