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

#javascript #html #jquery #веб_программирование

Нужно при нажатии на кнопку "Отправить" вытащить все загруженные файлы (изображения),
чтобы передать их потом на сервер. Не знаю, как это правильно сделать. Стоит обратить
внимание, что присутствует удаление изображение по клику по нему. Так что просто добавлять
загруженные объекты в список вряд ли получится. Думаю, здесь пригодились бы словари,
если таковы есть в 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('');
  $(".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)
});



  

    

      
    
  






    

Ответы

Ответ 1


  

    

      

        
        
      
    
  
  

  









PS Лучше воспользоваться готовыми библиотеками.


Ответ 2

При клике на кнопку, перебираем все классы .blah и добавляем в массив значение src
каждого. Независимо от того, сколько и чего до этого там было удалено... на месте собрали
что есть - отправили.

(в этом сниппете зависает с добавлением картинки), Здесь работает - JsFiddle демо



$('.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('');
  $(".product_images").val("");
}

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

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

/* До этого ничего не трогал */

$('#id_submit').click(function() {
  if( $(".blah").length == 0 ) { return; } // Если ничего не загружали

  var data = [];
  $(".blah").each(function(){
    data.push( $(this).attr('src') ); 
  });
  console.log(data);
});
.blah {width: 80px; margin: 5px; box-shadow: 1px 1px 3px #333;}



  

    

      
      
    
  
  
  
  






P.s. можно еще вне клика создать переменную, которая будет хранить предыдущий массив
картинок. А при клике, после сбора новых данных - сравнить текущий собранный с предыдущим.
Если изменений нет - лишний раз не обращаться к серверу.