Второй день мучений, подскажите кто может в чем ошибка.
Есть превью для загружаемых фотографий, не могу понять почему он выдает ошибку error ->4 в массиве с фото.
Остальную информацию с формы загружает, фотографии нет.
<form name="Download" id="Download" method="post" action="S.php" enctype="multipart/form-data">
<input type="number" name="run" value="run">
<input type="file" name="img[]" id="addImages" multiple="">
<input type="hidden" name="zaza" value="azaza">
<ul id="uploadImagesList">
<li class="item template">
<span class="img-wrap">
<img src="image.jpg" alt="">
</span>
<span class="delete-link" title="Удалить">Удалить</span>
</li>
</ul>
<div class="clear"></div>
<input type="submit" name="submit" value="Загрузить">
</form>
Код предварительного превью и удаления фото до загрузки на сервер.
jQuery(document).ready(function ($) {
var maxFileSize = 20 * 1024 * 1024; // (байт) Максимальный размер файла (20мб)
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( 'Размер фотографии не должен превышать 20 Мб' );
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-wrap 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]);
}
$.ajax({
url: $(this).attr('action'),
type: 'POST',
data: formData,
async: true,
success: function (res) {
alert(res)
},
cache: false,
contentType: false,
processData: false
});
return false;
});
});
Если ставлю форму загрузки фото то фото принимаются, как только подключаю превью для картинок перед загрузкой на сервер, снова все пусто.
JS код взят отсюда: https://codd-wd.ru/sozdanie-prevyu-izobrazhenij-s-pomoshhyu-html5-file-api-i-jquery