Давайте разберем предоставленный HTML, PHP, JavaScript и CSS код для панели управления загрузкой фрагментированных файлов по частям.

HTML-код:

Обзор структуры:

• Bootstrap for Layout: код использует Bootstrap 4.5.2 для создания адаптивного макета с двумя основными разделами:
  • Раздел загрузки частями: для загрузки больших файлов частями.
  • Раздел «Загрузки»: для просмотра и загрузки ранее загруженных файлов.

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

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

PHP-код (chunked-file-upload.php):

Этот файл управляет серверной логикой загрузки файлов частями.

Ключевые части:

1. Получить чанк и метаданные:

   • $_FILES['fileChunk']: получает фрагмент загружаемого файла.
   • $_POST['chunkIndex']: индекс текущего чанка.
   • $_POST['totalChunks']: общее количество фрагментов файла.

2. Хранилище фрагментов:

   • $chunkFilePath = $targetDir . «$fileName.part$chunkIndex»: каждый фрагмент сохраняется как отдельный файл .part до тех пор, пока не будет собран окончательный файл.

3. Объединение фрагментов:

   • if ($chunkIndex == $totalChunks - 1): когда последний фрагмент загружается, скрипт объединяет все фрагменты в окончательный файл.

4. Обратный ответ:

   • Клиенту возвращается ответ в формате JSON со статусом загрузки и сведениями о файле.

Зачем использовать фрагментацию?

• Большие файлы разбиваются на более мелкие фрагменты, чтобы предотвратить тайм-ауты и проблемы с памятью, что делает процесс загрузки более надежным.

PHP-код (download.php):

Осуществляет загрузку файлов.

Ключевые части:

1. $_GET['file']: извлекает имя файла из строки запроса URL.
2. Построение пути к файлу:
   • $filePath = $targetDir . $fileName: создает полный путь к файлу.
3. Загрузка файла:
   • readfile($filePath): отправляет файл клиенту в виде загружаемого потока.

Зачем его использовать?

• Позволяет пользователям загружать файлы непосредственно с сервера. Сервер отправляет правильные заголовки, чтобы предложить браузеру загрузить файл, а не отображать его.

PHP-код (get_files.php):

Перечисляет все загруженные файлы, доступные для скачивания.

Ключевые части:

1. scandir($targetDir): сканирует каталог на наличие всех загруженных файлов.
2. array_diff(): отфильтровывает . и.. из списка файлов.
3. echo json_encode(array_values($files)): возвращает список файлов в виде массива JSON.

Зачем его использовать?

• Предоставляет динамический список файлов, доступных для загрузки, который обновляется при каждом запросе.

Код JavaScript (chunked-file-upload.js):

Обрабатывает клиентскую логику загрузки и скачивания файлов по частям.

Ключевые части:

1. Перетаскивание:

   • preventDefaults(e): запрещает браузеру открывать файлы при перетаскивании.
   • handleDrop(e): обрабатывает переброшенные файлы и отображает их.

2. Показать список файлов:

   • displayFileList(files): отображает выбранные файлы с их размерами и статусами в списке файлов перед загрузкой.

3. Загрузка файлов частями:

   • for (let file of files): циклически перебирает каждый выбранный файл.
   • const chunk = file.slice(start, end): разрезает часть файла для загрузки как чанк.
   • uploadChunk(): рекурсивно загружает каждый фрагмент, обновляет индикатор выполнения и статус, а также объединяет фрагменты на сервере.

4. Загрузить файлы:

   • $.ajax({url: './src/get_files.php'}): отправляет запрос AJAX для получения списка загруженных файлов.
   • downloadFile(fileName): инициирует загрузку, перенаправляя пользователя на сайт download.php.

Зачем использовать фрагментированную загрузку в JS?

• Для больших файлов загрузка меньшими фрагментами гарантирует продолжение процесса, даже если один фрагмент выйдет из строя. Это повышает надежность, позволяя выполнять повторные попытки по частям.

CSS-код (chunked-file-upload.css):

Ключевые стили:

1. #drop-area:

   • Пунктирная граница: визуально обозначает область, куда пользователи могут перетаскивать файлы.
   • Эффект выделения: цвет рамки меняется при перетаскивании файла.

2. Индикатор прогресса:

   • #progress-bar: ширина динамически обновляется, отражая ход загрузки.

3. Список файлов:

   • #file-list .file-status: добавляет пробелы и стили для отображения имени, размера и статуса файла.

Зачем стилизовать эти элементы?

• Дружественный интерфейс помогает пользователям понять, какие действия они могут выполнять (перетаскивание, выбор файла), а также дает обратную связь о статусе их загрузок/загрузок.

Заключение:

Эта система позволяет надежно загружать большие файлы частями и предоставляет пользователям обратную связь через индикатор выполнения и обновления статуса. Кроме того, раздел загрузки дает пользователям возможность загружать загруженные файлы. Сочетание Bootstrap, JavaScript и PHP гарантирует, что система удобна и функциональна.

Соединяющие ссылки

Если эта серия оказалась для вас полезной, поставьте звездочку репозиторию на GitHub или поделитесь публикацией в своих любимых социальных сетях? Ваша поддержка очень много значит для меня!

Если вы хотите больше такого полезного контента, подписывайтесь на меня:

• LinkedIn
• GitHub

Исходный код