Задача знакомая, но в данном конкретном случае не работает, полдня ломаю голову - так что прошу помощи мирового зла, то есть разума.
Есть форма, которая на динамически формируемых местах может принять до 4 файлов-картинок. Визуально это выглядит так:
Дальше эти картинки (от 0 (их может и не быть) до 4 штук) вместе с другими данными отправляются по AJAX в php-бэк.
Фрагмент html (другие вышерасположенные поля формы вырезаны, чтобы не загромождать код):
<form method="post" enctype="multipart/form-data" id="reviewForm" data-postID="" acceptcharset="UTF-8">
<div class="tca-reviews-uploadImages">
<div class="tca-reviews-uploadButton">
<div class="tca-reviews-rmButton" id="removeImg">
<img src="https://reviews.pickinteri.co.il/wp-content/uploads/2022/12/close.png" class="tca-reviews-rmImage">
</div>
<label for="fileToUpload_0">
<img class="tca-reviews-uploadImage" id="imgToUpload_0" name="imgToUpload_0" data-loaded="0" src="https://reviews.pickinteri.co.il/wp-content/uploads/2022/12/Vector.png">
</label>
<input class="tca-reviews-uploadNode" type="file" accept="image/png, image/jpeg" name="fileToUpload_0" id="fileToUpload_0">
</div>
</div>
</form>
Фрагмент js-кода, который срабатывает на загрузке выбранного файла в input:
let reviewImages = []
$('.tca-reviews-uploadButton').on("change", 'input[class*=tca-reviews-uploadNode]', function(event){
const loader = $(this)
const imageFiles = event.target.files
const imageFilesLength = imageFiles.length
if (imageFilesLength > 0) {
let id = event.target.id.split('_')[1]
reviewImages[id] = event.target.files
loader.siblings("label").addClass('loaded_image')
loader.closest('.tca-reviews-uploadButton').addClass('holding_image')
const imagePlace = loader.siblings("label").find("img")
const imageSrc = URL.createObjectURL(imageFiles[0])
imagePlace.attr("src", imageSrc)
imagePlace[0].dataset['loaded'] = 1
}
})
и вот пользователь нажимает на кнопку Submit, и все начинает отправляться...только не отправляется.
$('#submitButton').on('click', function(e) {
e.preventDefault();
$("#visitorReview").remove();
$("#submitButton").prop('disabled',true);
$("#submitButton").slideUp('fast');
$('#processing').slideDown('fast');
const data = new FormData()
console.log(typeof reviewImages, reviewImages)
$.each(reviewImages, function(key, value) {
console.log(typeof value, value)
data.append('img_' + key, value)
});
//data.append('review_images', reviewImages)
//data.append('ratings', ratings)
//data.append('form_data', form_data)
data.append('action', 'visitor_send_review')
$.ajax({
url: "/wp-admin/admin-ajax.php",
type: 'POST',
data: data,
cache: false,
dataType: 'json',
processData : false,
contentType : false,
success: function (response) { // Ok
Проверка типов данных и их значений (вывод console.log) дает правильные данные - FileList и массив FileList-ов:
А вот на стороне php картинка следующая:
6 => php_array: [] - это массив $_FILES
6 => php_array: {"img_0":"[object FileList]","img_1":"[object FileList]","action":"visitor_send_review"} - это массив $_POST
6 => php_array: [] - это массив $_GET
Ожидание: Мне на стороне php надо получить как файлы картинок (чтобы иметь возможность загрузить их на сервер), так и другие данные формы (в js-коде выше закомментарены).
Blob
у тебя добавляется что-то другое, очевидноFileList
- это неверноvalue
- если там FileList - тебе надо просто по отдельности каждый файл добавлять