Есть форма, куда можно загружать изображения и видеть превью картинок, с возможностью удаления, если загружать "с нуля", то все отлично добавляется и удаляется, но если надо отредактировать количество изображений(удалить пару фотографий), то я заранее их вывожу в превью. После удаления и отправки формы у меня не получается отловить итоговый список картинок. Если добавляются новые, то они есть в $_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>
Сборка персонального компьютера от Artline: умный выбор для современных пользователей