Décomposons le code HTML, PHP, JavaScript et CSS pour un tableau de bord de téléchargement de fichiers fragmentés, partie par partie.

Code HTML :

Aperçu de la structure :

• Bootstrap for Layout : le code utilise Bootstrap 4.5.2 pour créer une mise en page réactive avec deux sections principales :
  • Section de téléchargements en morceaux : pour télécharger des fichiers volumineux en morceaux.
  • Section Téléchargements : pour répertorier et télécharger les fichiers précédemment téléchargés.

Éléments clés :

•  : cette entrée permet la sélection de plusieurs fichiers.
•  : espace réservé pour afficher la progression du téléchargement.
•  : espace réservé pour afficher les fichiers sélectionnés avant le téléchargement.
• Télécharger des fichiers : bouton pour lancer le processus de téléchargement.
• Télécharger des fichiers : bouton pour récupérer et afficher la liste des fichiers téléchargeables.

Code PHP (chunked-file-upload.php) :

Ce fichier gère la logique côté serveur de téléchargement de fichiers en morceaux.

Pièces clés :

1. Recevoir des fragments et des métadonnées :

   • $_FILES['fileChunk'] : reçoit la partie du fichier en cours de téléchargement.
   • $_POST['chunkIndex'] : L'index du morceau actuel.
   • $_POST['totalChunks'] : Le nombre total de morceaux pour le fichier.

2. Stockage de morceaux :

   • $chunkFilePath = $targetDir . "$fileName.part$chunkIndex" : chaque morceau est enregistré en tant que fichier .part distinct jusqu'à ce que le fichier final soit assemblé.

3. Fusion de morceaux :

   • if ($chunkIndex == $totalChunks - 1) : lorsque le dernier morceau est téléchargé, le script fusionne tous les morceaux dans le fichier final.

4. Réponse de retour :

   • Une réponse JSON est renvoyée au client avec l'état de téléchargement et les détails du fichier.

Pourquoi utiliser le chunking ?

• Les fichiers volumineux sont divisés en morceaux plus petits pour éviter les délais d'attente et les problèmes de mémoire, ce qui rend le processus de téléchargement plus fiable.

Code PHP (download.php) :

Gère les téléchargements de fichiers.

Pièces clés :

1. $_GET['file'] : récupère le nom du fichier à partir de la chaîne de requête URL.
2. Construction du chemin de fichier :
   • $filePath = $targetDir . $fileName : Construit le chemin complet du fichier.
3. Téléchargement de fichiers :
   • readfile($filePath) : envoie le fichier au client sous forme de flux téléchargeable.

Pourquoi l'utiliser ?

• Permet aux utilisateurs de télécharger des fichiers directement depuis le serveur. Le serveur envoie des en-têtes appropriés pour inviter le navigateur à télécharger le fichier plutôt que de l'afficher.

Code PHP (get_files.php) :

Répertorie tous les fichiers téléchargés disponibles au téléchargement.

Pièces clés :

1. scandir($targetDir) : analyse le répertoire pour tous les fichiers téléchargés.
2. array_diff() : filtre . et .. dans la liste des fichiers.
3. echo json_encode(array_values($files)) : renvoie la liste de fichiers sous forme de tableau JSON.

Pourquoi l'utiliser ?

• Fournit une liste dynamique de fichiers disponibles en téléchargement, qui est mise à jour à chaque demande.

Code JavaScript (chunked-file-upload.js) :

Gère la logique côté client des téléchargements de fichiers fragmentés et des téléchargements de fichiers.

Pièces clés :

1. Glisser-Déposer :

   • preventDefaults(e) : empêche le navigateur d'ouvrir les fichiers lorsqu'ils sont déposés.
   • handleDrop(e) : gère les fichiers déposés et les affiche.

2. Afficher la liste des fichiers :

   • displayFileList(files) : affiche les fichiers sélectionnés avec leurs tailles et leurs statuts dans la liste des fichiers avant le téléchargement.

3. Téléchargement de fichiers en morceaux :

   • for (laisser le fichier de fichiers) : parcourt chaque fichier sélectionné.
   • const chunk = file.slice(start, end) : découpe une partie du fichier à télécharger sous forme de morceau.
   • uploadChunk() : télécharge de manière récursive chaque morceau, met à jour la barre de progression et l'état, et fusionne les morceaux sur le serveur.

4. Télécharger des fichiers :

   • $.ajax({url: './src/get_files.php'}) : envoie une requête AJAX pour obtenir la liste des fichiers téléchargés.
   • downloadFile(fileName) : lance le téléchargement en redirigeant l'utilisateur vers download.php.

Pourquoi utiliser le téléchargement fragmenté en JS ?

• Pour les fichiers volumineux, le téléchargement en petits morceaux garantit la poursuite du processus même en cas d'échec d'un seul morceau. Il améliore la fiabilité en permettant des tentatives morceau par morceau.

Code CSS (chunked-file-upload.css) :

Styles clés :

1. #zone de dépôt :

   • Bordure en pointillés : indique visuellement la zone dans laquelle les utilisateurs peuvent déposer des fichiers.
   • Effet de surbrillance : la couleur de la bordure change lorsqu'un fichier est déplacé.

2. Barre de progression :

   • #progress-bar : la largeur est mise à jour dynamiquement pour refléter la progression du téléchargement.

3. Liste de fichiers :

   • #file-list .file-status : ajoute un espacement et des styles pour afficher le nom, la taille et l'état du fichier.

Pourquoi styliser ces éléments ?

• Une interface conviviale aide les utilisateurs à comprendre les actions qu'ils peuvent effectuer (glisser-déposer, sélection de fichiers) et donne des informations sur l'état de leurs téléchargements/importations.

Conclusion:

Ce système permet de télécharger de manière fiable des fichiers volumineux par morceaux et fournit aux utilisateurs des commentaires via une barre de progression et des mises à jour de statut. De plus, la section de téléchargement donne aux utilisateurs la possibilité de télécharger des fichiers téléchargés. La combinaison de Bootstrap, JavaScript et PHP garantit que le système est à la fois convivial et fonctionnel.

Liens de connexion

Si vous avez trouvé cette série utile, pensez à donner une étoile au référentiel sur GitHub ou à partager la publication sur vos réseaux sociaux préférés ?. Votre soutien signifierait beaucoup pour moi !

Si vous souhaitez du contenu plus utile comme celui-ci, n'hésitez pas à me suivre :

• LinkedIn
• GitHub

Code source