Dropzone.JS — замечательная опенсурс библиотека, написанная на ванильном JS. Она предоставляет интерфейс для загрузки файлов drag and drop с предварительным просмотром файлов.
Подготовка
Необходимо: загрузить dropzone.js и dropzone.css, создать папку uploads, создать файлы index.php и upload.php.
Базовая реализация
HTML структура (index.php):
Обработчик загрузки (upload.php):
Работа с загруженными файлами
Обновлённый upload.php с обработкой GET-запросов для получения списка файлов:
Обновлённый index.php с инициализацией и отображением уже загруженных файлов:
Ключевые компоненты: scandir() — функция сканирования папки uploads, JSON-ответ с информацией о файлах, mock файлы для имитации уже загруженных файлов в интерфейсе Dropzone.