Загрузка файлов

Bliss.js предоставляет удобные инструменты для управления файловыми операциями в браузере, включая выбор файлов через <input> и работу с drag-and-drop. В основе лежит использование методов Bliss.$ и событийных привязок для обработки пользовательских действий.

Элемент <input type="file"> и его обработка

Для выбора файлов используется стандартный элемент HTML:

<input type="file" id="fileInput" multiple>

Bliss.js позволяет легко привязать обработчик события change к этому элементу:

Bliss('#fileInput').on('change', function(event) {
    const files = event.target.files;
    Array.from(files).forEach(file => {
        console.log('Имя файла:', file.name);
        console.log('Размер файла:', file.size);
        console.log('Тип файла:', file.type);
    });
});

Ключевые моменты:

  • files — это коллекция FileList, содержащая все выбранные файлы.
  • Array.from() используется для преобразования FileList в массив для удобного перебора.
  • Каждый объект File содержит свойства name, size, type и методы для дальнейшей работы.

Загрузка файлов с помощью FormData

Для отправки файлов на сервер необходимо использовать объект FormData. Bliss.js упрощает интеграцию с AJAX:

const input = Bliss('#fileInput')[0];
const formData = new FormData();

Array.from(input.files).forEach(file => {
    formData.append('files[]', file);
});

Bliss.ajax({
    url: '/upload',
    method: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success(response) {
        console.log('Ответ сервера:', response);
    },
    error(xhr) {
        console.error('Ошибка загрузки:', xhr.statusText);
    }
});

Важные моменты:

  • processData: false отключает автоматическое преобразование данных в строку.
  • contentType: false позволяет браузеру установить правильный Content-Type для файлов.
  • Использование массива files[] позволяет загружать несколько файлов одновременно.

Drag-and-drop файлов

Bliss.js облегчает работу с drag-and-drop, используя события dragover и drop:

const dropZone = Bliss('#dropZone')[0];

Bliss(dropZone).on('dragover', function(event) {
    event.preventDefault();
    dropZone.classList.add('drag-over');
});

Bliss(dropZone).on('dragleave', function() {
    dropZone.classList.remove('drag-over');
});

Bliss(dropZone).on('drop', function(event) {
    event.preventDefault();
    dropZone.classList.remove('drag-over');
    
    const files = event.dataTransfer.files;
    Array.from(files).forEach(file => {
        console.log('Перетащенный файл:', file.name);
    });
});

Особенности:

  • event.preventDefault() необходим для корректной работы drop-зоны в браузере.
  • Класс drag-over используется для визуальной индикации состояния.
  • dataTransfer.files возвращает FileList аналогично <input type="file">.

Валидация файлов перед загрузкой

Bliss.js позволяет реализовать проверку файлов по размеру, типу или количеству:

Bliss('#fileInput').on('change', function(event) {
    const files = event.target.files;
    const maxSize = 5 * 1024 * 1024; // 5 МБ
    const allowedTypes = ['image/jpeg', 'image/png'];

    Array.from(files).forEach(file => {
        if (!allowedTypes.includes(file.type)) {
            console.warn('Недопустимый тип файла:', file.name);
            return;
        }
        if (file.size > maxSize) {
            console.warn('Файл слишком большой:', file.name);
            return;
        }
        console.log('Файл прошёл проверку:', file.name);
    });
});

Важные моменты:

  • Проверка типа file.type предотвращает загрузку неподдерживаемых форматов.
  • Проверка размера file.size помогает контролировать нагрузку на сервер.

Асинхронное чтение файлов через FileReader

Для предварительного просмотра содержимого файлов перед отправкой используется FileReader:

Bliss('#fileInput').on('change', function(event) {
    const files = event.target.files;

    Array.from(files).forEach(file => {
        const reader = new FileReader();
        reader.onl oad = function(e) {
            console.log('Содержимое файла:', e.target.result);
        };
        reader.readAsDataURL(file); // для изображений
    });
});

Особенности использования:

  • readAsDataURL() используется для получения Base64-кода файла (например, изображений).
  • readAsText() подходит для текстовых файлов.
  • onload срабатывает после завершения чтения.

Прогресс загрузки файлов

Bliss.js интегрируется с событиями XMLHttpRequest для отображения прогресса:

const formData = new FormData();
formData.append('file', Bliss('#fileInput')[0].files[0]);

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.upload.onprogr ess = function(event) {
    if (event.lengthComputable) {
        const percent = (event.loaded / event.total) * 100;
        console.log('Прогресс:', percent.toFixed(2) + '%');
    }
};
xhr.onl oad = function() {
    if (xhr.status === 200) {
        console.log('Загрузка завершена');
    }
};
xhr.send(formData);

Ключевые моменты:

  • xhr.upload.onprogress позволяет отслеживать загрузку файла в реальном времени.
  • event.lengthComputable проверяет возможность вычисления процента.
  • event.loaded и event.total используются для расчёта прогресса.

Интеграция с визуальными компонентами

Bliss.js позволяет легко обновлять DOM при работе с файлами:

Bliss('#fileInput').on('change', function(event) {
    const preview = Bliss('#preview')[0];
    preview.innerHTML = '';
    
    Array.from(event.target.files).forEach(file => {
        const reader = new FileReader();
        reader.onl oad = function(e) {
            const img = document.createElement('img');
            img.src = e.target.result;
            img.alt = file.name;
            img.width = 100;
            preview.appendChild(img);
        };
        reader.readAsDataURL(file);
    });
});

Особенности:

  • Использование innerHTML = '' очищает предыдущие превью.
  • Создание элементов DOM динамически позволяет визуализировать загружаемые файлы.
  • FileReader и DOM-методы совместно обеспечивают плавный UX.

Этот набор возможностей делает Bliss.js мощным инструментом для реализации современных интерфейсов загрузки файлов, сочетая простоту синтаксиса и гибкость работы с DOM, AJAX и событиями drag-and-drop.

Оглавление