Работа с файлами

Dom7 — это легковесная и быстрая библиотека для работы с DOM в JavaScript, которая используется как основа во многих современных фреймворках, включая Framework7. Она предоставляет удобный синтаксис для выборки элементов, работы с атрибутами, событиями и динамическими изменениями контента. В контексте работы с файлами Dom7 чаще всего применяется для обработки элементов <input type="file">, динамического создания ссылок для загрузки файлов, а также чтения файлов через JavaScript API.

Выбор элементов для работы с файлами

Основная точка взаимодействия с файлами — элемент <input type="file">. Dom7 позволяет легко получить доступ к нему и реагировать на изменения:

const fileInput = Dom7('input[type="file"]');

Эта строка создаёт объект Dom7, содержащий выбранные элементы. Даже если элементов несколько, методы Dom7 применяются ко всем сразу.

Для получения выбранного файла используется стандартный DOM API:

fileInput.on('change', function (event) {
    const files = event.target.files; // FileList
    console.log(files);
});

files — это объект FileList, который можно перебирать для работы с каждым отдельным файлом.

Чтение файлов

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

fileInput.on('change', function (event) {
    const file = event.target.files[0]; // первый файл
    if (file) {
        const reader = new FileReader();
        reader.onl oad = function (e) {
            console.log(e.target.result); // содержимое файла
        };
        reader.readAsText(file); // чтение как текст
    }
});

Dom7 облегчает обработку событий change и других, объединяя синтаксис выбора элементов и подписки на события в одном объекте.

Можно читать файлы и как DataURL для изображений:

reader.readAsDataURL(file);

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

Для отправки файлов на сервер удобно использовать объект FormData. Dom7 позволяет собрать данные формы и файлы в одну структуру:

const form = Dom7('form');

form.on('submit', function (e) {
    e.preventDefault();
    const formData = new FormData(e.target);
    const files = e.target.querySelector('input[type="file"]').files;
    for (let i = 0; i < files.length; i++) {
        formData.append('files[]', files[i]);
    }

    fetch('/upload', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(result => console.log(result))
    .catch(error => console.error(error));
});

Dom7 упрощает поиск элементов внутри формы через цепочку методов find и each, позволяя динамически добавлять файлы в FormData.

Динамическая генерация ссылок для скачивания

Иногда требуется предоставить пользователю возможность скачать сгенерированный файл. Dom7 позволяет создавать элементы и управлять их атрибутами:

const blob = new Blob(['Привет, мир!'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);

const link = Dom7('<a>')
    .attr('href', url)
    .attr('download', 'example.txt')
    .text('Скачать файл');

Dom7('body').append(link);

Методы .attr() и .text() обеспечивают удобное управление свойствами элементов без необходимости писать длинные DOM-операции.

Обработка нескольких файлов

Dom7 позволяет работать сразу с коллекцией файлов и элементов. Перебор элементов и файлов осуществляется через .each:

Dom7('input[type="file"]').each(function (el) {
    el.addEventListener('change', function (event) {
        const files = event.target.files;
        Array.from(files).forEach(file => {
            console.log('Имя файла:', file.name);
            console.log('Размер файла:', file.size);
        });
    });
});

.each() принимает функцию с параметром el, который представляет конкретный DOM-элемент из коллекции Dom7.

Это особенно полезно для форм с множественными полями загрузки или динамически созданными элементами <input>.

Валидация файлов

Перед загрузкой или чтением файлов часто требуется проверка типа и размера. Dom7 облегчает доступ к атрибутам и значениям:

fileInput.on('change', function (e) {
    const file = e.target.files[0];
    if (!file) return;

    const maxSize = 2 * 1024 * 1024; // 2 МБ
    if (file.size > maxSize) {
        console.error('Файл слишком большой');
        return;
    }

    const allowedTypes = ['image/png', 'image/jpeg'];
    if (!allowedTypes.includes(file.type)) {
        console.error('Недопустимый тип файла');
        return;
    }

    console.log('Файл прошел проверку:', file.name);
});

Dom7 не заменяет стандартные проверки JavaScript, но делает работу с DOM элементами удобной и лаконичной.

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

Dom7 часто используется вместе с визуальными компонентами для отображения превью файлов:

fileInput.on('change', function (e) {
    const previewContainer = Dom7('#preview');
    previewContainer.html(''); // очистка предыдущих превью

    Array.from(e.target.files).forEach(file => {
        const reader = new FileReader();
        reader.onl oad = function (event) {
            const img = Dom7('<img>').attr('src', event.target.result).addClass('preview-image');
            previewContainer.append(img);
        };
        reader.readAsDataURL(file);
    });
});

Методы Dom7 .html(), .append() и .addClass() позволяют быстро управлять контентом и стилями элементов, создавая динамические превью без сложного DOM-кода.

Использование событий drag-and-drop

Для расширенной работы с файлами часто применяются события drag-and-drop. Dom7 упрощает привязку обработчиков:

const dropZone = Dom7('#drop-zone');

dropZone.on('dragover', function (e) {
    e.preventDefault();
    dropZone.addClass('drag-over');
});

dropZone.on('dragleave', function () {
    dropZone.removeClass('drag-over');
});

dropZone.on('drop', function (e) {
    e.preventDefault();
    dropZone.removeClass('drag-over');
    const files = e.originalEvent.dataTransfer.files;
    console.log(files);
});

Событие e.originalEvent используется для доступа к свойствам dataTransfer, так как Dom7 оборачивает стандартные события.

Эти возможности делают Dom7 мощным инструментом для работы с файлами: от загрузки и чтения до динамического создания ссылок и визуального отображения контента. Методы библиотеки сокращают шаблонный код и позволяют строить гибкую архитектуру взаимодействия с файлами в современных веб-приложениях.

Оглавление