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

Быстрый ответ

Для отправки файлов посредством AJAX создайте экземпляр FormData и соберите в нем данные. Подключите ваши файлы и отправьте запрос с помощью XMLHttpRequest:

let formData = new FormData(); // Создаем экземпляр
formData.append('file', document.querySelector('#fileInput').files[0]); // Добавляем файл

let xhr = new XMLHttpRequest(); // Готовимся к отправке
xhr.open('POST', 'upload_url'); // Задаем адрес получателя
xhr.send(formData); // Отправляем!

Замените 'upload_url' на URL вашего сервера для загрузки файлов. Необходимости перезагружать страницу нет, процесс идет гладко.

Упаковываем грузовик: Работа с множественными файлами и различными типами данных

Если требуется отправить несколько файлов и другие данные, то используйте следующий подход:

let formData = new FormData(document.querySelector('#uploadForm')); // Загружаем данные из формы

for (let file of document.querySelector('#fileInput').files) {
    formData.append('files[]', file); // Добавляем файлы
}

// Отправляем данные, не являющиеся файлами
formData.append('username', 'HanSolo');
formData.append('token', 'ChewbaccaIsMyCopilot');

Любой тип данных, будь то файл или другие данные, может быть упакован в FormData.

Ускоряем нашего дроида: Улучшение AJAX-запроса

Используйте jQuery для облегчения отправки запроса:

$.ajax({
    url: 'upload_url',
    type: 'POST', 
    data: formData,
    contentType: false,
    processData: false,
    beforeSend: function() {
        // Готовимся к отправке: отображаем индикатор загрузки или блокируем кнопку
    },
    success: function(response) {
        // Успех: данные успешно загружены
    },
    error: function(jqXHR, textStatus, errorThrown) {
        // Обрабатываем возникшую ошибку
    }
});

Установка параметра contentType: false обеспечивает корректное определение типа контента отправляемых данных, а processData: false предотвращает преждевременную обработку данных jQuery.

Визуализация

Представьте процесс AJAX-загрузки как передачу планов Звезды Смерти дроиду:

🖥️ -> [Внедрили планы] -> [Отправили дроида] -> 🌐

А для повстанческой стороны:

Шаг 1: 📦 (Планы готовы) 
Шаг 2: 🚚💨 (Дроид в пути)
Шаг 3: 🏁 (Планы доставлены)

Миссия выполнена: данные успешно доставлены на сервер!

Совместимость и отслеживание прогресса

Для использования параметра contentType: false убедитесь, что вы используете jQuery версии 1.6 или более новой. Для отслеживания прогресса загрузки:

xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
        let percentage = (e.loaded / e.total) * 100; // Отображение прогресса в процентах
        // Обновляем индикатор прогресса
    }
};

xhr.upload.onloadstart = function(e) {
    // Начинаем загрузку
};

xhr.upload.onloadend = function(e) {
    // Загрузка успешно завершена
};

Пусть сеть будет с вами

Сетевые подключения могут быть нестабильными, поэтому для предотвращения потери данных рекомендуется установить таймаут:

$.ajax({
    // Параметры запроса
    timeout: 30000, // Устанавливаем 30 секунд ожидания
    
    // Прочие параметры
});

В случае проблем с подключением предусмотрите механизм для повторной попытки отправки или вывода сообщения о проблемах на сервере.

Защита сервера от ситхов

Учитывайте возможность попыток взлома и обеспечьте безопасность на сервернной стороне: проверяйте типы и размеры загружаемых файлов, предотвращайте массовую загрузку. Никогда не забывайте о валидации входящих данных.

Полезные материалы

1. FormData – Web APIs | MDN — Документация MDN по FormData.
2. javascript – How can I upload files asynchronously with jQuery? – Stack Overflow — Обсуждение на Stack Overflow по асинхронной загрузке файлов с использованием jQuery.
3. Sending forms through JavaScript – Learn web development | MDN — Учебные материалы MDN о отправке форм через JavaScript.
4. Axios – file upload example — Пример загрузки файлов с использованием Axios.
5. How to Use HTML5 File Drag and Drop — SitePoint — Руководство по использованию функции перетаскивания файлов в HTML5.