Блог

Я загружаю несколько изображений с помощью ajax, который работает нормально, но теперь я хочу передать описание с изображениями в массиве. Пожалуйста, помогите мне сделать это. Ниже приведен мой код для загрузки изображений.

 const _that = $(this);
_that.attr('disabled', true);
var form_data = new FormData();
var totalfiles = document.getElementById('files').files.length;
for (var index = 0; index < totalfiles; index  ) {
  form_data.append("files[]", document.getElementById('files').files[index]);
}
$.ajax({
  url: '<?php echo base_url('
  product_services / add ') ?>',
  type: 'post',
  data: form_data,
  dataType: 'json',
  contentType: false,
  processData: false,
  success: function(response) {
    for (var index = 0; index < response.length; index  ) {
      var src = response[index];
      // Add img element in 
      <
      div id = 'preview' >
        $('#preview').append('<img src="'   src   '" width="200px;" height="200px">');
    }
  }
});
  

HTML-форма

 <div class="images row">
   <div class="col-sm-12 dynamic_form" style="display:flex; align-items:center;">
      <div class="col-sm-5">
         <div class="form-group">
            <label for="desc">Description</label>
            <input type="text" name="description[]" id="desc" placeholder="Description" class="form-control">
         </div>
      </div>
      <div class="col-sm-5">
         <div class="form-group">
            <label for="file">Image</label>
            <input type="file" name="file[]" id="file" class="form-control">
         </div>
      </div>
      <div class="col-md-2">
         <button type="button" class="add_more btn btn-primary"> </button>
      </div>
   </div>
</div>
  

Вывод формы

Приветствуется любое решение!

Из: https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects

Вы можете использовать formdata следующим образом:

 var formData = new FormData();
document.getElementsByName('file[]').forEach(inputField => {
    Array.from(inputField).prop('files')).forEach(file => {
        formData.append(file.name, file);
    });
});
  

PS: «document.getElementById (‘files’)» получает только 1 элемент, идентификатор является единственным, вы не можете установить 2 элемента с одинаковым идентификатором, дайте мне знать, если вам нужно что-то еще!