POST-запрос с текстовыми полями и файлами

Question

Я следую этому учебнику о том, как загружать файлы с ajax и php. Однако это только для вложенных изображений, а моя форма представляет собой смесь текстовых полей и вложений. У меня нет проблем с загрузкой только текстовых полей.

Это мой HTML для вложений:

<!-- Attachments -->
<div class="row">
    <div class="col-md-4">
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon1" style="background-color: #fff;"><i class="fas fa-plus"></i></span>
          </div>
        <input type="submit" class="form-control" value="Add Attachment" id="addAttachment">
        </div>
    </div>
</div>

После нажатия кнопки Добавить вложение:

var attachmentCounter = 0;
$("#addAttachment").click(function(e){
    e.preventDefault();
    if (attachmentCounter == 0) {
        $(this).after('<input type="file" id="files" name="files[]" multiple><br>');
        attachmentCounter = attachmentCounter + 1;
    }
});

И когда отправляя форму, это код:

$("#applyLoan").click(function(event) {
    event.preventDefault();

    // There are some variable declarations here that I just skipped because I think they aren't relevant to the question

    var applicationFormData = {
        LoanType: loanType,
        LoanPurpose: loanPurpose,
        Principal: principal,
        Term: term,
        PaymentMode: paymentMode,
        Interest: interest,
        Penalty: penalty
    }

    // Additionals
    var formData = new FormData();
    // This is the form text fields
    formData.append('applicationFormData', JSON.stringify(applicationFormData));

    // These are the images
    var totalfiles = document.getElementById('files').files.length;
    for (var index = 0; index < totalfiles; index++) {
        formData.append("files[]", document.getElementById('files').files[index]);
    }

    $.ajax({
        type: "POST",
        url: "ajax/application_form.php",
        data: formData,
        success: function(response) {
            console.log(response);
        }
    });
});

application_form. php

if (isset($_POST)) {
    if (isset($_FILES['files'])) {
        echo "Files set";
    } else {
        echo "Files not set";
    }
}

Я получаю сообщение об ошибке при открытии тега ajax запроса:

  jquery-3.4.1.min.js:2 Uncaught TypeError: Illegal invocation
     at i (jquery-3.4.1.min.js:2)
     at qt (jquery-3.4.1.min.js:2)
     at Function.k.param (jquery-3.4.1.min.js:2)
     at Function.ajax (jquery-3.4.1.min.js:2)
     at HTMLButtonElement.<anonymous> (application_form.js:219)
     at HTMLButtonElement.dispatch (jquery-3.4.1.min.js:2)
     at HTMLButtonElement.v.handle (jquery-3.4.1.min.js:2)

Answer 1

Вам необходимо установить contentType: false и processData: false для отправки FormData с параметром jQuery ajax.

contentType, который автоматически установит заголовок Content-Type, и параметр processData force jQuery для преобразования ваших FormData в String, что невозможно.

, поэтому ваш исходный код Ajax будет:

$.ajax({
    type: "POST",
    url: "ajax/application_form.php",
    data: formData,
    enctype: "multipart/form-data",
    contentType: false,
    processData: false,
    success: function(response) {
        console.log(response);
    }
});