Получить файлы из динамически созданных входов

Я создал новые входные данные файла, основанные на динамическом щелчке пользователя. Я пытаюсь отправить их, используя 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>');
}

0 ответов

Другие вопросы по тегам