从动态创建的输入中获取文件

Question

我已根据用户动态点击创建了新的文件输入。我试图使用formData提交它们，但是当我遍历输入时，图像对象（第一个除了因为它不是动态的）除外。我知道这与动态添加它们有关，但我尝试过的所有东西都不能自己获取对象。这是我的代码。

<form role="form" action="" name="boat_image" id="boat_image" method="post"  enctype="multipart/form-data" >
<div class="boat_images">
<div class="image_placeholder">
<input type="file" name="image_add" class="image_add" id="image_add" data-sort="1">
<label for="image_add">
<img id="placeholder" src="../images/placeholder.png" width="100%" height="100%" alt=""/> 
</label>
</div>
</div>
</form>

<script type="text/javascript">
$( ".boat_edit_submit" ).click(function() {

var formData = new FormData();

var inputs = $("#boat_image input");
$.each(inputs, function (obj, v) {
    var file = v.files[0];
    alert(JSON.stringify(v));
   formData.append('image_add['+obj+']', file);
});



$.ajax({
type: "POST",
url: 'boats/boat_image.php',
data: formData,
processData: false,
contentType: false,
success: function (data) {
      $(".messages").html(data);
}
});

当用户上传图片时会添加动态内容，然后使用此内容创建一个新的占位符。

function addNextImage(image_sort){
image_sort = parseInt(image_sort);
var nextsort = image_sort + 1;
$('.boat_images').append('<div class="image_placeholder"><input type="file"name="image_add"class="image_add" id="image_add"data-sort="' + nextsort + '"><label for="image_add"><img id="placeholder"src="../images/placeholder.png"width="100%" height="100%"/></label></div>');
}