Как объединить два массива изображений в процедуре ajax?

Question

[maiskiykot]

Приветствую. Нашел на просторах тырнета функцию отправки фоток с превью:

$(document).ready(function (e) {
   
   $.ajaxSetup({
       headers: {
           'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
   });
  
  $(function() {
    // Multiple images preview with JavaScript
    var multiImgPreview = function(input, imgPreviewPlaceholder) {
        if (input.files) {
            var filesAmount = input.files.length;
            for (i = 0; i < filesAmount; i++) {
                var reader = new FileReader();
                reader.onload = function(event) {
                    $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(imgPreviewPlaceholder);
                }
                reader.readAsDataURL(input.files[i]);
            }
        }
    };
    $('#images').on('change', function() {
        multiImgPreview(this, 'div.preview-image');
    });
  });    
  
   $('#multiple-image-upload-preview-ajax').submit(function(e) {
     e.preventDefault();
  
      var formData = new FormData(this);
      let TotalImages = $('#images')[0].files.length; //Total Images
      let images = $('#images')[0];
      for (let i = 0; i < TotalImages; i++) {
          formData.append('images' + i, images.files[i]);
      }
      formData.append('TotalImages', TotalImages);
  
     $.ajax({
        type:'POST',
        url: "{{ url('upload-images-ajax')}}",
        data: formData,
        cache:false,
        contentType: false,
        processData: false,
        success: (data) => {
           this.reset();
           alert('Multiple Images has been uploaded using jQuery ajax with preview');
           $('.preview-image').html("")
        },
        error: function(data){
           console.log(data);
         }
       });
   });
});

Работает нормально, если выбирать сразу к примеру 3 фотки. Однако, при последовательном выборе получается фигня. Превьюхи выбираются правильно, а сохраняется на сервере только последняя фотка. Подскажите: как грамотно подпилить код, чтобы и при том и при том методе выбора массив фоток был одинаковым для обеих процедур. Спасибо!

Comments

[Юрий Матрос]

создается новый объект FormData каждый раз при выборе фотки....соответственно если ты добавил поочередно 3 штуки, сохранится только третья

[maiskiykot]

Юрий Матрос, Проверять на существование? Или гдк-то в другом месте кода создавать его?

[Юрий Матрос]

вот так попробуй
maiskiykot,

var formData = new FormData(this);
var files = $('#images')[0].files;
for (var i = 0; i < files.length; i++) {
  formData.append('images[]', files[i]);
}

[maiskiykot]

Юрий Матрос, var filesAmount = input.files.length; - а вот это не подойдет во второй процедуре? И будет ли это изменяться для всех при this.remove()?