Как получить список загруженных изображений?

Question

Когда я нажимаю кнопку «Отправить», необходимо получить все загруженные файлы (изображения), чтобы потом передать их на сервер. Я не знаю, как это сделать правильно.

Стоит отметить, что при удалении изображения происходит его нажатие. Так что просто добавить загруженные объекты в список вряд ли удастся. Я думаю, что словари были бы полезны здесь, если бы они были в jquery.

$('.product_images_button').click(function() {
  $('.product_images').click()
});

function readURL(input) {
  var reader = new FileReader();

  reader.onload = function(e) {
    $('.blah').last().attr('src', e.target.result).css('width', '150px').css('opacity', '0.9');
  }

  reader.readAsDataURL(input.files[0]);
  $('.media_preview_wrap').append('<img class="blah" src="">');
  $(".product_images").val("");
}

$(".product_images").change(function() {
  readURL(this);
});

$(document).on('click', '.blah', function() {
  $(this).remove()
})

$('#id_submit').click(function() {
  var data = {
    }
  console.log(data)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="media_preview_wrap">
  <div class="addPhoto">
    <div class="addPhotoHeader">
      <button type="button" class="button product_images_button">Upload image</button>
    </div>
  </div>
</div>
<input type="file" name="image" style="display: none" required="" class="product_images" id="">
<button id="id_submit" type="button">Send</button>

Answer 1

Не нужно заново изобретать колесо.

Плагин загрузки файлов jQuery (от heyageek) делает все, что вам нужно, и минимален и проверен временем. (я успешно использовал его в течение многих лет)

Обратите внимание, что у него есть пример кода для клиентской стороны (jQuery) и для сервера (PHP).

Вы захотите взглянуть на функции formData и / или dynamicFormData, которые позволяют собирать другие данные перед отправкой и отправлять их (вместе с загруженным файлом) нафайл вашей внутренней обработки.

dynamicFormData: function()
{
    //var data ="XYZ=1&ABCD=2";
    var data ={"XYZ":1,"ABCD":2};
    return data;        
}

В js / jQuery словари (Python) просто называются объектами.