VGFiles + VGFilePreview
Выберите изображения, видео, аудио, PDF, текст или ZIP. Нажмите на имя для просмотра, на кнопку воспроизведения для аудио или на значок скачивания для сохранения файла.
Выбрано:
Можно выбрать до 6 файлов: каждый до 25 МБ, суммарно до 75 МБ. Повторный выбор дополняет список; отдельные файлы можно удалить, весь набор — сбросить. Файлы остаются в браузере и не загружаются на сервер.
HTML
<div class="vg-files" id="vg-files-preview-widget"
data-image="true"
data-limits-count="6"
data-limits-sizes="25"
data-limits-total="75">
<label for="vg-files-preview-input" class="vg-files-label">
<span class="vg-files-label--title">Выбрать файлы</span>
</label>
<div class="vg-files-stat">
<div class="vg-files-stat-title">Выбрано: <span class="vg-files-stat-count"></span></div>
<div class="vg-files-stat-dismiss"><a href="#" data-vg-dismiss="vg-files">Сбросить</a></div>
</div>
<div class="vg-files-info"></div>
<input type="file" id="vg-files-preview-input" name="files[]"
accept="image/*,audio/*,video/*,.pdf,.txt,.md,.csv,.json,.zip"
data-vg-toggle="files" multiple>
</div>
JavaScript
// Достаточно Data API VGFiles: .vg-files и data-vg-toggle="files".
// При выборе файлов модуль сам создаёт строки [data-vg-filepreview]
// в .vg-files-info и подключает VGFilePreview с ui.nameOnly: true.
// Отдельная инициализация VGFilePreview и обработчик change не нужны.
CSS
/* Дополнительные стили не требуются. */