@krispey102

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

Есть форма, в которой 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>
  • Вопрос задан
  • 110 просмотров
Пригласить эксперта
Ответы на вопрос 1
@zkrvndm
Боты, парсеры, расширения
Отправляйте саму форму, а не сериализованные данные. Пример:
$(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();
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы