Проблема с получением файлов из нескольких загрузок с помощью jquery ⇐ Jquery

[Anonymous]

Я пытаюсь отправить на сервер несколько изображений с помощью ajax и php.
HTML:

Код: Выделить всё

+
[i]
×

JAVASCRIPT:
Этот стиль поля файла создается путем создания квадратного поля, при нажатии которого открывается селектор изображений и включается до пяти файлов. Работает правильно

Код: Выделить всё

document.addEventListener('DOMContentLoaded', function() {
const uploadContainer = document.getElementById('uploadContainer');
const imageUploadForm = document.getElementById('form-review');
let imageCount = 0;
const maxImages = 5;

function createUploadBox() {
if (imageCount >= maxImages) return;

const uploadBox = document.createElement('div');
uploadBox.classList.add('upload-box');
uploadBox.innerHTML = `
+

×
`;
uploadContainer.appendChild(uploadBox);

setTimeout(() => uploadBox.classList.add('show'), 10);

attachUploadEvents(uploadBox);
}

function attachUploadEvents(uploadBox) {
const input = uploadBox.querySelector('input[type="file"]');
const deleteIcon = uploadBox.querySelector('.delete-icon');

uploadBox.addEventListener('click', () => {
if (uploadBox.classList.contains('filled')) return;
input.click();
});

input.addEventListener('change', (event) => {
const files = Array.from(event.target.files);
const validFiles = files.slice(0, maxImages - imageCount);
validFiles.forEach(file => {
const reader = new FileReader();
reader.onload = (e) => {
const imgBox = document.createElement('div');
imgBox.classList.add('upload-box', 'show', 'filled');
imgBox.innerHTML = `
[img]${e.target.result}[/img]
×
`;
uploadContainer.insertBefore(imgBox, uploadContainer.lastElementChild);
attachDeleteEvent(imgBox);
imageCount++;
if (imageCount >= maxImages) {
const emptyUploadBox = document.querySelector('.upload-box:not(.filled)');
if (emptyUploadBox) emptyUploadBox.remove();
}
};
reader.readAsDataURL(file);
});

input.value = '';
});

deleteIcon.addEventListener('click', (event) => {
event.stopPropagation();
event.preventDefault();
uploadBox.classList.remove('show');
setTimeout(() => {
uploadBox.remove();
imageCount--;
ensureOneEmptyUploadBox();
}, 300);
});
}

window.resetUploadBoxes = function() {
const filledUploadBoxes = document.querySelectorAll('.upload-box.filled');
filledUploadBoxes.forEach(box => box.remove());
imageCount = 0;
ensureOneEmptyUploadBox();
}

function attachDeleteEvent(uploadBox) {
const deleteIcon = uploadBox.querySelector('.delete-icon');
deleteIcon.addEventListener('click', (event) => {
event.stopPropagation();
event.preventDefault();
uploadBox.classList.remove('show');
setTimeout(() => {
uploadBox.remove();
imageCount--;
ensureOneEmptyUploadBox();
}, 300);
});
}

function ensureOneEmptyUploadBox() {
const emptyUploadBox = document.querySelector('.upload-box:not(.filled)');
if (!emptyUploadBox && imageCount < maxImages) {
createUploadBox();
}
}

attachUploadEvents(document.querySelector('.upload-box'));

$('#button-review').on('click', function() {
var formData = new FormData($('#form-review')[0]);

// Loop through all file input elements
$('input[type="file"]', $('#form-review')).each(function(index, input) {
if (input.files.length >  0) {
formData.append('image[]', input.files[0]);
}
});

$.ajax({
url: 'index.php?route=product/product/write&product_id={{ product_id }}',
type: 'post',
dataType: 'json',
data: formData,
cache: false,
contentType: false,
processData: false,
beforeSend: function() {
$('#button-review').button('loading');
},
complete: function() {
$('#button-review').button('reset');
},
success: function(json) {
$('.alert-dismissible').remove();

if (json['error']) {
$('#review').after('[/i] ' + json['error'] + '');
$('html, body').animate({scrollTop: $("#review").offset().top}, 800);
}

if (json['success']) {
resetUploadBoxes();
$('#review').after('[i][/i] ' + json['success'] + '');
$('html, body').animate({scrollTop: $("#review").offset().top}, 800);

$('input[name=\'name\']').val('');
$('textarea[name=\'text\']').val('');
$('input[name=\'rating\']:checked').prop('checked', false);
}
},
error: function(xhr, ajaxOptions, thrownError) {
alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
});
});
});

PHP:

Код: Выделить всё

$files = [];
if (!empty($this->request->files) && is_array($this->request->files)) {
foreach ($this->request->files as $key) {
if ($key['name'] != "") {
$files[] = array(
'name' => $key['name'],
'type' => $key['type'],
'tmp_name' => $key['tmp_name'],
'error' => $key['error'],
'size' => $key['size']
);
}
}
}

Это работает почти нормально, но я не могу получить изображения на стороне сервера. Поступивший массив пуст. Я могу отправить текст формы, и никаких ошибок не возникает. Я проанализировал код, в том числе с помощью ИИ, и не нашел ничего плохого.

Подробнее здесь: https://stackoverflow.com/questions/785 ... ith-jquery