Метод 1: объект FormData
Вы можете использовать объект FormData для одновременной отправки данных формы и файлов. Вот пример:

var formData = new FormData();
formData.append('name', $('#name').val());
formData.append('email', $('#email').val());
formData.append('file', $('#file')[0].files[0]);
$.ajax({
    url: 'your_server_url',
    type: 'POST',
    data: formData,
    contentType: false,
    processData: false,
    success: function(response) {
        // Handle the response
    }
});

В этом примере #nameи #emailпредставляют собой поля ввода имени и электронной почты соответственно. #fileпредставляет поле ввода файла.

Метод 2: кодирование Base64
Другой подход — закодировать файл как строку Base64 и отправить его вместе с данными формы. Вот пример:

var fileInput = $('#file')[0].files[0];
var reader = new FileReader();
reader.onloadend = function() {
    var base64File = reader.result;
    var formData = {
        name: $('#name').val(),
        email: $('#email').val(),
        file: base64File
    };
    $.ajax({
        url: 'your_server_url',
        type: 'POST',
        data: formData,
        success: function(response) {
            // Handle the response
        }
    });
};
reader.readAsDataURL(fileInput);

В этом примере #nameи #emailпредставляют собой поля ввода имени и электронной почты соответственно. #fileпредставляет поле ввода файла.

Метод 3: несколько запросов Ajax
В качестве альтернативы вы можете отправить данные формы и файл в отдельных запросах Ajax. Сначала отправьте данные формы и получите уникальный идентификатор (например, идентификатор) для отправки. Затем используйте этот идентификатор для загрузки файла в другом запросе Ajax. Вот пример:

var formData = {
    name: $('#name').val(),
    email: $('#email').val()
};
$.ajax({
    url: 'your_server_url',
    type: 'POST',
    data: formData,
    success: function(response) {
        var submissionId = response.id;
        var fileInput = $('#file')[0].files[0];
        var fileData = new FormData();
        fileData.append('file', fileInput);
        fileData.append('submissionId', submissionId);
        $.ajax({
            url: 'your_file_upload_url',
            type: 'POST',
            data: fileData,
            contentType: false,
            processData: false,
            success: function(response) {
                // Handle the response
            }
        });
    }
});

В этом примере первый запрос Ajax отправляет данные формы в your_server_url, а ответ содержит идентификатор отправки. Второй запрос Ajax загружает файл в your_file_upload_urlвместе с идентификатором отправки.