0

Уже третий день мучаю этот код, и всё никак не получается при помощи аякса сабмитить форму для загрузки изображений. Дело в том, что форма полноценно работает и загружает изображения в нужную дерикторию при условии, если в форму добавить input type="submit" и кликнуть на него. Тоесть по части формы (html) и метода в контроллере (php) всё работает как надо. Но мне необходимо делать загрузку в фоне, тоесть при помощи ajax. Я уже много сайтов перековырял, тот же stackoverflow, результат один и тот же. Везде пишут как надо, у всех работает - а у меня этот кусок кода даже не реагирует никак. Пробовал в трех браузерах: Crome android, Cromium на Debian и Firefox - результат одинаков везде. Вот собственно код.

Это метод в контроллере. Работает как надо, но понятное дело, будут доработки.

public function uploadImageAction (Request $request) {
    $image_filename = $request->request->get('input_image_filename');
    $distination_path = $this->getProjectDir() . "/images/public/";

    try {
        foreach ($request->files as $uploaded_file) {
            $image_filepath = $uploaded_file->move($distination_path, $image_filename);
        }
        //echo "Загрузка успешна";
    } catch (IOExceptionInterface $exception) {
        //echo "Ошибка загрузки файла ".$exception->getPath();
    }
    $result = array(
        'result' => $image_filename
    );
    return new JsonResponse($result);
}

Это форма в шаблоне. Выше по коду два поля ввода не входящих в форму (image_title и image_description), они сериализуются отдельно и отдельной функцией пишутся в БД. Но так как в проблему это не входит, я это и не писал.

<form id="input_image_form" enctype="multipart/form-data" action="{{ path ('upload_image_action') }}" method="post">
                    <input type="hidden" name="MAX_FILE_SIZE" value="300000" />
                    <div class="file-field input-field">
                        <div class="btn">
                            <span><i class="material-icons">file_upload</i></span>
                            <input type="file" name="input_image_file" id="input_image_file" />
                        </div>
                        <div class="file-path-wrapper">
                            <input type="text" class="file-path validate" id="input_image_filename" value="" placeholder="{{ language.images.input_image_filename }}" />
                        </div>
                    </div>
                </form>

А это сам неработающий аякс. Точнее говоря, событие на нажатие кнопки button_add_image реагирует и выполняется до конца. А вот сабмит формы вообще никакой реакции. Ни одного console.log не срабатывает. Полное игнорирование. И консоль отладки никаких ошибок не пишет при отработке кода. Проверен был класс FormData - в браузерах присутствет и при отдельном запуске создания нового экземпляра - работает. Были проверены разные варианты сериализации формы, но везде на сайтах пишут именно приведенный мной ниже код.

$('#button_add_image').on('click', function() {
    $('#input_image_form').submit(function(event) {
        event.preventDefault();
        var input_image_form = $('#input_image_form')[0];
        console.log(input_image_form);

        $.ajax({
            type: "POST",
            url: "{{ path ('upload_image_action') }}",
            enctype: 'multipart/form-data',
            data: new FormData(input_image_form),
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            timeout: 600000,
            beforeSend: function() {
                elegant_alert.success("start sending");
             console.log("start sending");
            },
            success: function() {
                elegant_alert.success("success sending");
             console.log("success sending");
            },
            complete: function() {
                elegant_alert.success("complete sending");
             console.log("complete sending");
            },
            error: function() {
                elegant_alert.error("error sending");
             console.log("error");
            }
        });

        return false;
    });

    var form_data = serialize_forms();
   console.log(form_data);
    //images.add_image(form_data);
    delete form_data;
});
3
  • Не увидел в коде места, где бы триггерился сабмит формы. Обработчик события есть, но он не будет вызван без генерации нужного ивента. Если отправлять запрос вы планируете по нажатию на button_add_image, то переместите код находящийся внутри submit(function... на уровень выше, а сам листнер удалите.
    – angy_v
    6 мая 2018 в 18:04
  • Вот это я затупил. Я уже добавлял триггер, но внутрь button_add_image, форма сабмитилась, а листнер не срабатывал. Всё решено, спасибо Вам за помощь. 6 мая 2018 в 19:18
  • Рад, что вам удалось победить проблему. Нажмите пожалуйста стрелку вверх слева от моего ответа, отметив его полезным. Старайтесь всегда отмечать ответы, которые способствовали решению ваших задач и вы поможете другим пользователям быстрее находить ответы на их вопросы.
    – angy_v
    7 мая 2018 в 14:46

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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