Отловить удаления изображений в превью

251
03 мая 2018, 07:55

Есть форма, куда можно загружать изображения и видеть превью картинок, с возможностью удаления, если загружать "с нуля", то все отлично добавляется и удаляется, но если надо отредактировать количество изображений(удалить пару фотографий), то я заранее их вывожу в превью. После удаления и отправки формы у меня не получается отловить итоговый список картинок. Если добавляются новые, то они есть в $_FILES, как можно узнать или передать список удаленных картинок?(нужно для обновления БД и удаления из архива ненужных фотографий)

jQuery(document).ready(function($) { 
 
  var maxFileSize = 2 * 1024 * 1024; 
  var queue = {}; 
  var form = $('form#uploadImages'); 
  var imagesList = $('#uploadImagesList'); 
 
  var itemPreviewTemplate = imagesList.find('.item.template').clone(); 
  itemPreviewTemplate.removeClass('template'); 
  imagesList.find('.item.template').remove(); 
 
 
  $('#addImages').on('change', function() { 
    var files = this.files; 
 
    for (var i = 0; i < files.length; i++) { 
      var file = files[i]; 
 
      if (!file.type.match(/image\/(jpeg|jpg|png|gif)/)) { 
        alert('Фотография должна быть в формате jpg, png или gif'); 
        continue; 
      } 
 
      if (file.size > maxFileSize) { 
        alert('Размер фотографии не должен превышать 2 Мб'); 
        continue; 
      } 
 
      preview(files[i]); 
    } 
 
    this.value = ''; 
  }); 
 
  // Создание превью 
  function preview(file) { 
    var reader = new FileReader(); 
    reader.addEventListener('load', function(event) { 
      var img = document.createElement('img'); 
 
      var itemPreview = itemPreviewTemplate.clone(); 
 
      itemPreview.find('.img-wrapi img').attr('src', event.target.result); 
      itemPreview.data('id', file.name); 
 
      imagesList.append(itemPreview); 
 
      queue[file.name] = file; 
 
    }); 
    reader.readAsDataURL(file); 
  } 
 
  // Удаление фотографий 
  imagesList.on('click', '.delete-link', function() { 
    var item = $(this).closest('.item'), 
      id = item.data('id'); 
 
    delete queue[id]; 
 
    item.remove(); 
  }); 
 
 
  // Отправка формы 
  form.on('submit', function(event) { 
 
    var formData = new FormData(this); 
 
    for (var id in queue) { 
      formData.append('images[]', queue[id]); 
    } 
 
    return false; 
  }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form action="" method="post" enctype="multipart/form-data" id="uploadImages"> 
    <input class="btn btn-primary btn-md" type="file" id="addImages" multiple=""> 
    <?php 
	echo '<ul id="uploadImagesList">'; 
	foreach($images as $image){  
        echo '<li class="item"> 
                <span class="img-wrapi"> 
                  <img src="obj/'.$image.'" alt=""> 
                </span> 
                <span class="delete-link" title="Удалить">Удалить</span> 
              </li>'; 
      }  
       
      echo '<li class="item template"> 
              <span class="img-wrapi"> 
                <img src="image.jpg" alt=""> 
              </span> 
              <span class="delete-link" title="Удалить">Удалить</span> 
            </li> 
            </ul> 
            <div class="clear"></div>'; 
				      
    ?> 
  <input type="submit" class="btn btn-primary btn-md" value="Загрузить" /> 
</form>

READ ALSO
TokenMismatchException (put запрос). Laravel

TokenMismatchException (put запрос). Laravel

у меня выскакивает ошибка: TokenMismatchException Я на этот url отправляю put запрос admin_panel/article/12/edit в laravelВ ручную записал путь:Route::put("/article/{id?}/edit","Action\ArticleController@update");

248
Точный поиск в MySQL

Точный поиск в MySQL

Имеется следующая таблица БД

280
Как пройтись по запросу where Mysql и PHP

Как пройтись по запросу where Mysql и PHP

Стоит задача найти элемент в таблицы данных:

216
Не выводит изображение PHP

Не выводит изображение PHP

Не получается вывести изображениеИзображение хранится в формате BLOB

245