Lassen Sie uns den bereitgestellten Code HTML, PHP, JavaScript und CSS aufschlüsseln für ein Dashboard zum Teilen von Datei-Uploads, Teil für Teil.

HTML-Code:

Strukturübersicht:

• Bootstrap für Layout: Der Code verwendet Bootstrap 4.5.2, um ein responsives Layout mit zwei Hauptabschnitten zu erstellen:
  • Abschnitt „Chunked Uploads“: Zum Hochladen großer Dateien in Blöcken.
  • Download-Bereich: Zum Auflisten und Herunterladen zuvor hochgeladener Dateien.

Schlüsselelemente:

• : Diese Eingabe ermöglicht die Auswahl mehrerer Dateien.
• : Platzhalter zur Anzeige des Upload-Fortschritts.
• : Platzhalter zum Anzeigen ausgewählter Dateien vor dem Hochladen.
• Dateien hochladen: Schaltfläche zum Starten des Upload-Vorgangs.
• Dateien herunterladen: Schaltfläche zum Abrufen und Anzeigen der Liste der herunterladbaren Dateien.

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

Diese Datei verwaltet die serverseitige Logik zum Hochladen von Dateien in Blöcken.

Schlüsselteile:

1. Chunk und Metadaten empfangen:

   • $_FILES['fileChunk']: Empfängt den Teil der Datei, die hochgeladen wird.
   • $_POST['chunkIndex']: Der Index des aktuellen Chunks.
   • $_POST['totalChunks']: Die Gesamtzahl der Chunks für die Datei.

2. Chunk-Speicher:

   • $chunkFilePath = $targetDir . „$fileName.part$chunkIndex“: Jeder Block wird als separate .part-Datei gespeichert, bis die endgültige Datei zusammengestellt ist.

3. Chunks zusammenführen:

   • if ($chunkIndex == $totalChunks - 1): Wenn der letzte Block hochgeladen wird, fügt das Skript alle Blöcke in der endgültigen Datei zusammen.

4. Rückantwort:

   • Eine JSON-Antwort wird mit dem Upload-Status und den Dateidetails an den Client zurückgegeben.

Warum Chunking verwenden?

• Große Dateien werden in kleinere Teile aufgeteilt, um Zeitüberschreitungen und Speicherprobleme zu vermeiden und den Upload-Prozess zuverlässiger zu machen.

PHP-Code (download.php):

Verwaltet Dateidownloads.

Schlüsselteile:

1. $_GET['file']: Ruft den Dateinamen aus der URL-Abfragezeichenfolge ab.
2. Dateipfadkonstruktion:
   • $filePath = $targetDir . $fileName: Konstruiert den vollständigen Pfad der Datei.
3. Datei-Download:
   • readfile($filePath): Sendet die Datei als herunterladbaren Stream an den Client.

Warum es verwenden?

• Ermöglicht Benutzern das Herunterladen von Dateien direkt vom Server. Der Server sendet geeignete Header, um den Browser aufzufordern, die Datei herunterzuladen, anstatt sie anzuzeigen.

PHP-Code (get_files.php):

Listet alle hochgeladenen Dateien auf, die zum Download verfügbar sind.

Schlüsselteile:

1. scandir($targetDir): Durchsucht das Verzeichnis nach allen hochgeladenen Dateien.
2. array_diff(): Filtert heraus. und .. aus der Dateiliste.
3. echo json_encode(array_values($files)): Gibt die Dateiliste als JSON-Array zurück.

Warum es verwenden?

• Stellt eine dynamische Liste der zum Download verfügbaren Dateien bereit, die bei jeder Anfrage aktualisiert wird.

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

Verwaltet die clientseitige Logik von geblockten Datei-Uploads und Datei-Downloads.

Schlüsselteile:

1. Drag and Drop:

   • preventDefaults(e): Verhindert, dass der Browser Dateien öffnet, wenn sie gelöscht werden.
   • handleDrop(e): Behandelt abgelegte Dateien und zeigt sie an.

2. Dateiliste anzeigen:

   • displayFileList(files): Zeigt die ausgewählten Dateien mit ihren Größen und Status in der Dateiliste vor dem Hochladen an.

3. Dateien in Blöcken hochladen:

   • for (let file of files): Durchläuft jede ausgewählte Datei.
   • const chunk = file.slice(start, end): Schneidet einen Teil der Datei in Scheiben, um ihn als Block hochzuladen.
   • uploadChunk(): Lädt jeden Block rekursiv hoch, aktualisiert den Fortschrittsbalken und den Status und führt die Blöcke auf dem Server zusammen.

4. Dateien herunterladen:

   • $.ajax({url: './src/get_files.php'}): Sendet eine AJAX-Anfrage, um die Liste der hochgeladenen Dateien abzurufen.
   • downloadFile(fileName): Initiiert den Download, indem der Benutzer zu download.php weitergeleitet wird.

Warum Chunked Upload in JS verwenden?

• Bei großen Dateien stellt das Hochladen in kleineren Blöcken sicher, dass der Prozess auch dann fortgesetzt wird, wenn ein Block fehlschlägt. Es verbessert die Zuverlässigkeit, indem es Chunk-für-Chunk-Wiederholungsversuche ermöglicht.

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

Schlüsselstile:

1. #drop-area:

   • Gestrichelter Rand: Zeigt visuell den Bereich an, in dem Benutzer Dateien ablegen können.
   • Hervorhebungseffekt: Die Rahmenfarbe ändert sich, wenn eine Datei darüber gezogen wird.

2. Fortschrittsbalken:

   • #progress-bar: Die Breite wird dynamisch aktualisiert, um den Upload-Fortschritt widerzuspiegeln.

3. Dateiliste:

   • #file-list .file-status: Fügt Abstände und Stile hinzu, um den Dateinamen, die Größe und den Status anzuzeigen.

Warum diese Elemente stylen?

• Eine benutzerfreundliche Oberfläche hilft Benutzern zu verstehen, welche Aktionen sie ausführen können (Drag-and-Drop, Dateiauswahl) und gibt Feedback zum Status ihrer Uploads/Downloads.

Abschluss:

Dieses System ermöglicht das zuverlässige Hochladen großer Dateien in Blöcken und gibt Benutzern Feedback über einen Fortschrittsbalken und Statusaktualisierungen. Darüber hinaus bietet der Download-Bereich Benutzern die Möglichkeit, hochgeladene Dateien herunterzuladen. Durch die Kombination von Bootstrap, JavaScript und PHP wird sichergestellt, dass das System sowohl benutzerfreundlich als auch funktional ist.

Verbindungslinks

Wenn Sie diese Serie hilfreich fanden, denken Sie bitte darüber nach, dem Repository einen Stern auf GitHub zu geben oder den Beitrag in Ihren bevorzugten sozialen Netzwerken zu teilen? Ihre Unterstützung würde mir sehr viel bedeuten!

Wenn Sie weitere hilfreiche Inhalte wie diesen wünschen, folgen Sie mir gerne:

• LinkedIn
• GitHub

Quellcode