Ajax как передать файл из input type=file и принять в php?

Question

[krispey102]

Есть форма, в которой 3 поля: Имя, Email, прикрепленный файл
Вот Ajax, который передает данные в php:

$(document).on('submit', '#form-job-modal-wrapper', function (e) {
        var form = $(this);
        var form_data = $(this).serialize();

        $.ajax({
            type: 'POST',
            url: 'action_ajax_form.php',
            data: form_data,
            success: (data) => {
                $('#jobModal').html(data);
                $( window ).resize();
            }
        });

        e.preventDefault();
    })

Передаётся Имя и Email - поля, но поле "файл" отсутствует. Многое перепробовал в гугле, все равно не могу вывести.
Вёрстка:

<form class="job-modal__form is-form" id="form-job-modal-wrapper" action="action_ajax_form.php">
    <div class="job-modal__form-title">Apply for this job</div>
    <div class="is-columns gap-20">
        <div class="col">
            <div class="is-form-field is-form__field state-inited">
                <label class="is-form__field-box">
                    <span class="is-form__label">Name</span>
                    <input name="form_user_name" id="user_name" type="text" autocomplete="off"
                           onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your name'"
                           placeholder="Your name" class="is-input _field-inited"
                           data-validation="{&quot;mask&quot;:&quot;text&quot;,&quot;require&quot;:false,&quot;visible&quot;:true,&quot;error&quot;:&quot;required field&quot;}">
                </label>
                <div class="ff-error-parent">required field</div>
            </div>
        </div>
        <div class="col">
            <div class="is-form-field is-form__field state-inited">
                <label class="is-form__field-box">
                    <span class="is-form__label">E-mail</span>
                    <input name="form_user_email" id="user_email" type="text" autocomplete="off"
                           onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your e-mail'"
                           placeholder="Your e-mail" class="is-input _field-inited"
                           data-validation="{&quot;mask&quot;:&quot;email&quot;,&quot;require&quot;:true,&quot;visible&quot;:true,&quot;error&quot;:&quot;Enter a valid e-mail&quot;}">
                </label>
                <div class="ff-error-parent">Enter a valid e-mail</div>
            </div>
        </div>
    </div>
    <div class="file-uploader">
        <div class="file-uploader__label">Cover Letter (PDF or DOC)*</div>
        <div class="file-uploader-inner">
            <div class="js-drop-upload">
                <div class="ajax-upload-dragdrop" style="vertical-align: top; width: 400px;">
                    <div class="ajax-file-upload" style="position: relative; overflow: hidden; cursor: default;">
                        Upload a file
                        <form method="POST" action="upload.php" enctype="multipart/form-data"
                              style="margin: 0px; padding: 0px;"><input type="file"
                                                                        name="myfile"
                                                                        accept=".pdf, application/msword, .doc, .docx"
                                                                        style="position: absolute; cursor: pointer; top: 0px; width: 100%; height: 100%; left: 0px; z-index: 100; opacity: 0;">
                        </form>
                    </div>
                    <span>or drag and drop here</span></div>
                <div></div>
            </div>
            <div class="ajax-file-upload-container"></div>
        </div>
    </div>
    <div class="is-form__submit">
        <button type="submit" class="button button--primary button--fill" id="button-submit-js-job-vacancy">
            <span class="button__gradient"></span>
            <span class="button__text">submit</span>
        </button>
    </div>
</form>

Comments

[FanatPHP]

Неужели вот настолько прям сложно погуглить jquery отправить файл?

[krispey102]

FanatPHP, Я гуглил уже полдня, во многих способах у меня выводит undefined, в других - вообще ничего

[kagor32]

krispey102, https://blueimp.github.io/jQuery-File-Upload/
Вот эта штука 146% рабочая. Пробуй.

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

[FanatPHP]

ну КАК можно нагуглить вариант, который использует serialize?! КАК? Если с serialize в принципе не работает отправка файлов? О чем говорится в КАЖДОМ ответе, который я нахожу поиском?

[FanatPHP]

kagor32, уже 100 лет как никому не нужно. Вместе со всей жекверей, собственно.

[Дмитрий]

krispey102, на qna.habr тоже есть похожие вопросы.
И к ним ответы.
Как загрузить изображение на сервер через AJAX?

[kagor32]

Mellorn, рад ошибаться. Жаль только, что заблуждался всё время

Answer 1

[Надим]

Отправляйте саму форму, а не сериализованные данные. Пример:

$(document).on('submit', '#form-job-modal-wrapper', function (e) {
        $.ajax({
            type: 'POST',
            url: 'action_ajax_form.php',
            data: new FormData(this),
            success: (data) => {
                $('#jobModal').html(data);
                $( window ).resize();
            }
        });

        e.preventDefault();
});