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

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

Для асинхронной загрузки файлов с помощью jQuery вам нужно использовать объект FormData и метод $.ajax(). Основная проблема вашего кода в том, что вы используете стандартную отправку формы, которая вызывает перезагрузку страницы. Вместо этого мы перехватим событие отправки формы и отправим данные через AJAX.

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

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <form id="uploadForm" enctype="multipart/form-data">
        <input type="file" name="file" id="fileInput">
        <button type="submit" id="submitBtn">Загрузить</button>
    </form>
    <div id="progress"></div>

    <script>
        $(document).ready(function() {
            $('#uploadForm').on('submit', function(e) {
                e.preventDefault(); // Предотвращаем перезагрузку страницы

                // Создаем объект FormData и добавляем файл
                var formData = new FormData();
                var fileInput = document.getElementById('fileInput');
                
                if (fileInput.files.length > 0) {
                    formData.append('file', fileInput.files[0]);
                } else {
                    alert('Пожалуйста, выберите файл');
                    return;
                }

                // Отправляем AJAX-запрос
                $.ajax({
                    url: '/upload', // URL вашего серверного обработчика
                    type: 'POST',
                    data: formData,
                    contentType: false, // Важно: не устанавливаем Content-Type
                    processData: false, // Важно: не обрабатываем данные
                    beforeSend: function() {
                        $('#submitBtn').prop('disabled', true);
                        $('#progress').text('Загрузка...');
                    },
                    success: function(response) {
                        $('#progress').text('Файл успешно загружен!');
                        console.log('Ответ сервера:', response);
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        $('#progress').text('Ошибка загрузки: ' + textStatus);
                        console.error('Ошибка:', errorThrown);
                    },
                    complete: function() {
                        $('#submitBtn').prop('disabled', false);
                    }
                });
            });
        });
    </script>
</body>
</html>

Ключевые моменты, которые нужно понять:

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

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

Вы также можете добавить индикатор прогресса загрузки:

xhr: function() {
    var xhr = new window.XMLHttpRequest();
    xhr.upload.addEventListener('progress', function(e) {
        if (e.lengthComputable) {
            var percent = Math.round((e.loaded / e.total) * 100);
            $('#progress').text('Загрузка: ' + percent + '%');
        }
    }, false);
    return xhr;
}

Этот код нужно добавить в опции $.ajax() перед success. Он будет показывать реальный процент загрузки файла.

На серверной стороне (например, на PHP или Node.js) вы должны обрабатывать файл как обычную multipart-форму. Убедитесь, что ваш серверный endpoint принимает POST-запросы с файлами.

document.getElementById('uploadForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const formData = new FormData();
    const fileInput = document.getElementById('fileInput');
    
    if (fileInput.files.length === 0) {
        alert('Выберите файл');
        return;
    }
    
    formData.append('file', fileInput.files[0]);
    
    try {
        const response = await fetch('/upload', {
            method: 'POST',
            body: formData
        });
        
        if (!response.ok) {
            throw new Error('Ошибка сервера: ' + response.status);
        }
        
        const result = await response.json();
        console.log('Успех:', result);
        document.getElementById('progress').textContent = 'Файл загружен!';
    } catch (error) {
        console.error('Ошибка:', error);
        document.getElementById('progress').textContent = 'Ошибка: ' + error.message;
    }
});