Input File
Стандартный HTML-тег <input type="file">- Упорядочивание файлов
- Редактор изображений с обрезанием и выбором размера
- Оптимизация изображений и создание srcset для разных размеров экрана
- Оптимизация видео с созданием постера
<cb-file>
<label class="cb-button-board"><input type="file" multiple>File</label>
</cb-file>Атрибуты input
data-append
Каждый новый файл или файлы добавятся к списку файлов в конец
data-src
Предустановка картинки. Например data-src="/image/url"
data-size
Работает для изображений в комбинации с accept="image/*". Указывается конкретный размер: ширина и высота через пробел. Например data-seze="1200 630" значит 1200 x 630 px. Если вы хотите выбрать максимальный размер, какой позволяет экран устройства: укажите размеры через запятую: data-size="1200 630, 600 315". Одинаковую ширину и высоту можно указать одной цифрой, например data-size="512" значит 512 x 512 px.
data-optimize
Оптимизация. Для изображений accept="image/*", для видео accept="video/*". Указать 0 или не указать ничего, значит сохранить ширину. Для специальных размеров укажите ширину через запятую. Например атрибуты data-size="512" и data-optimize="0, 256, 128, 64" создадут четыре изображения в формате webp шириной 512, 256, 128, 64.
data-lang
Если указан, то для каждого языка отдельный файл. Если нет, то файл будет один для всех языков.
<cb-file>
<label class="cb-button-board">
<input type="file" accept="image/*"
data-size="1280 720"
data-optimize
data-append/>
File
</label>
</cb-file> События
changeSrc
Событие обновление адреса файла
const file = document.querySelector('cb-file')
file.addEventListener('changeSrc', callback)