Как асинхронно загрузить файл на сервер с помощью jQuery и AJAX?

Использование FormData для асинхронной загрузки файлов

Проблема вашего кода в том, что $('#fileInput').val() возвращает только строку с именем файла, а не его содержимое. Для отправки файла через AJAX необходимо использовать объект FormData. Он позволяет собирать данные формы, включая файлы, в формат, который правильно обрабатывается сервером.

Вот исправленный и рабочий пример:

<form id="uploadForm" enctype="multipart/form-data">
    <input type="file" name="file" id="fileInput">
    <button type="submit">Загрузить</button>
</form>
<div id="result"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $('#uploadForm').on('submit', function(e) {
        e.preventDefault();

        // Создаём объект FormData из DOM-элемента формы
        var formData = new FormData(this);

        // Или можно вручную добавить файл:
        // var formData = new FormData();
        // var file = document.getElementById('fileInput').files[0];
        // formData.append('file', file);

        $.ajax({
            url: '/upload',
            type: 'POST',
            data: formData,
            processData: false,  // Важно: не обрабатывать данные
            contentType: false,  // Важно: не устанавливать заголовок Content-Type
            success: function(response) {
                $('#result').html('<p style="color:green;">Файл загружен: ' + response + '</p>');
            },
            error: function(jqXHR, textStatus, errorThrown) {
                $('#result').html('<p style="color:red;">Ошибка: ' + textStatus + ' - ' + errorThrown + '</p>');
            }
        });
    });
});
</script>

Ключевые моменты решения:

• FormData(this) — автоматически собирает все поля формы, включая файлы. В конструктор передаётся DOM-элемент формы.
• processData: false — запрещает jQuery преобразовывать данные в строку запроса (по умолчанию true). Для FormData это обязательно.
• contentType: false — позволяет браузеру самостоятельно установить заголовок Content-Type: multipart/form-data с правильной границей (boundary). Если этого не сделать, сервер не сможет распарсить файл.

Пример серверной части (Node.js с Express и multer):

const express = require('express');
const multer = require('multer');
const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), (req, res) => {
    if (!req.file) {
        return res.status(400).send('Файл не получен');
    }
    res.send('Файл ' + req.file.originalname + ' загружен успешно');
});

app.listen(3000);

Дополнительные советы:

• Для отображения прогресса загрузки используйте событие xhr.upload.onprogress.
• Можно добавить поддержку нескольких файлов через атрибут multiple у <input>.
• Всегда проверяйте тип и размер файла на клиенте перед отправкой.

document.getElementById('uploadForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    const formData = new FormData(this);
    const resultDiv = document.getElementById('result');

    try {
        const response = await fetch('/upload', {
            method: 'POST',
            body: formData
        });
        if (!response.ok) throw new Error('Ошибка сервера');
        const text = await response.text();
        resultDiv.innerHTML = '<p style="color:green;">Файл загружен: ' + text + '</p>';
    } catch (error) {
        resultDiv.innerHTML = '<p style="color:red;">Ошибка: ' + error.message + '</p>';
    }
});