2

Нужно при нажатии на кнопку "Отправить" вытащить все загруженные файлы (изображения), чтобы передать их потом на сервер. Не знаю, как это правильно сделать. Стоит обратить внимание, что присутствует удаление изображение по клику по нему. Так что просто добавлять загруженные объекты в список вряд ли получится. Думаю, здесь пригодились бы словари, если таковы есть в 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">Добавить фото</button>
    </div>
  </div>
</div>
<input type="file" name="image" style="display: none" required="" class="product_images" id="">
<button id="id_submit" type="button">Отправить</button>

1
  • 1
    Предполагаю, можно всё же помещать объекты в список. Просто при удалении определять, какой по порядку элемент удаляется и удалять соответствующий из списка. 14 июн 2019 в 17:21

2 ответа 2

3
<form id="product_form" action="upload.php" enctype="multipart/form-data" method="post">
  <div class="media_preview_wrap">
    <div class="addPhoto">
      <div class="addPhotoHeader">
        <button id="add_images" type="button" class="button">Добавить фото</button>
        <input type="file" name="image" class="product_images" accept="image/*" multiple />
      </div>
    </div>
  </div>
  <hr>
  <button type="submit" class="button">Отправить</button>
</form>

<script>
// Массив загружаемых файлов. Изначально пуст.
var files = [];

$('#add_images').click(function() {
  $('.product_images').click();
});

// При выборе файлов запускаем функцию обработчик.
$('.product_images').change(function() {
  handleFiles(this);
});

// При клике на миниатюру удаляем файл из списка + миниатюру.
$('.media_preview_wrap').on('click', '.thumb', function() {
  removeFile($(this).data('id'));
});

// Отправку формы обязательно вешаем
// на событие `submit`, а не на клики по кнопкам.
$('#product_form:first').submit(function(event) {
  // Отменяем стандартное поведение формы.
  event.preventDefault();

  // Перебираем все файлы из массива.
  files.forEach(function(file, index) {
    // Собираем данные для отправки.
    var data = new FormData();
    // Добавляем имя изображения: $_POST['name'].
    data.append('name', file.name);
    // Добавляем само изображение: $_FILES['image'].
    data.append('image', file.file);

    uploadFile(event.target.action, data)
      .done(function(response) {
        // При удачной загрузке удаляем файл из списка + миниатюру.
        removeFile(file.id);
      })
      .fail(function(error) {
        console.log(error);
      });
  });
});


// Функция, отрабатывающая при выборе файлов.
function handleFiles(input) {
  // При помощи данного объекта будем
  // подгружать атрибут `src` для изображений.
  var URL = window.URL || window.webkitURL;

  // Придумываем псевдо-идентификатор для изображения.
  var uniqueId = (new Date()).getTime();

  // Перебираем все файлы из `input`.
  for (var i = 0; i < input.files.length; i++) {
    // Выбираем файл из списка файлов по индексу.
    var file = input.files[i];

    // Если файл выбран и его `mime-type` допустИм, то:
    if (file && file.type.startsWith('image/')) {
      // 1. Увеличиваем псевдо-идентификатор на единицу.
      uniqueId++;

      // 2. Добавляем в массив для последующей загрузки.
      files.push({
        id: uniqueId,
        file: file,
        name: file.name // задел для возможности переименования файла.
      });

      // 3. Показываем миниатюру.
      var img = $('<img src="'+ URL.createObjectURL(file) +'" class="thumb" data-id="'+ uniqueId +'">');
      $('.media_preview_wrap').append(img);

      // 4. Освобождаем память, уничтожая объект с ссылкой
      // после того как изображение будет подгружено.
      img.on('load', function() {
        URL.revokeObjectURL(this.src);
      });
    }
  }

  // Очищаем `input`.
  $(input).val('');
}

// Удаление из списка загрузок + удаление миниатюры.
function removeFile(id) {
  // Отфильтруем список файлов,
  // оставив все кроме файла с указанным `id`.
  files = files.filter(function(file) {
    return id !== file.id;
  })

  // Удаляем миниатюру.
  $('img[data-id="'+ id +'"]').remove();
}

// Отправка файла на сервер.
function uploadFile(url, data) {
  return $.ajax({
    type: 'POST',
    url: url,
    data: data,
    processData: false,
    contentType: false,
    cache: false
  });
}
</script>

<style>
  .thumb {
    width: 150px;
    height: auto;
    opacity: 0.9;
    cursor: pointer;
  }
  .thumb:hover {
    opacity: 1;
  }
  .product_images {
    display: none;
  }
</style>

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

1

При клике на кнопку, перебираем все классы .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('<img class="blah" src="">');
  $(".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;}
<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">Добавить фото</button>
      <button id="id_submit" type="button">Отправить</button>
    </div>
  </div>  
  <img class="blah" src="https://gyazo.com/0d017714eb3a95acf9efc7caf9949112.png">
  <img class="blah" src="https://gyazo.com/4aaff87a0a3729241f10489325a3b92b.png">
</div>
<input type="file" name="image" style="display: none" required="" class="product_images" id="">

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

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.