0

Задача знакомая, но в данном конкретном случае не работает, полдня ломаю голову - так что прошу помощи мирового зла, то есть разума.

Есть форма, которая на динамически формируемых местах может принять до 4 файлов-картинок. Визуально это выглядит так: исходная форма с одним местом для картинки запрос загрузки полностью загружены картинки сформированный html для загруженной картинки

Дальше эти картинки (от 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-ов: console.log результат

А вот на стороне 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-коде выше закомментарены).

3
  • в formdata надо добавлять Blob у тебя добавляется что-то другое, очевидно FileList - это неверно
    – Grundy
    Commented 26 февр. 2023 в 13:42
  • Спасибо, @Grundy, ты был прав. Я чувствовал, что проблема в этом blod.... Вот так теперь выглядит массив $_FILES: php_array: {"img_0":{"name":"blob","type":"application\/octet-stream","tmp_name":"\/tmp\/phpmxo4Mf","error":0,"size":19008}} после того, как я в js сделал let tmpBlob = new Blob(value)ж data.append('img_' + key, tmpBlob)
    – Vit
    Commented 26 февр. 2023 в 13:49
  • посмотри что у тебя в value - если там FileList - тебе надо просто по отдельности каждый файл добавлять
    – Grundy
    Commented 26 февр. 2023 в 15:14

1 ответ 1

0

Решение было найдено вчера с подачи @Grundy - так и предполагал, что blob шутки шутит.

В подготовке данных для передачи в php сделано изменение:

$.each(reviewImages, function(key, value) {
    let tmpBlob = new Blob(value) 
    data.append('img_' + key, tmpBlob)
});

Теперь массив $_FILES на стороне php действительно содержит перечень передаваемых файлов. Решение найдено, вопрос закрыт, эта часть кода уже работает.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.