TEIL# Effizientes Dateiübertragungssystem mit HTTP für große Datensätze

Let's break down the provided HTML, PHP, JavaScript, and CSS code for a chunked file upload dashboard part by part.

HTML Code:

Structure Overview:

• Bootstrap for Layout: The code uses Bootstrap 4.5.2 to create a responsive layout with two main sections:
  • Chunked Uploads Section: For uploading large files in chunks.
  • Downloads Section: For listing and downloading previously uploaded files.

Key Elements:

• : This input allows multiple file selection.
• : Placeholder for displaying upload progress.
• : 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 Chunk wird als separate .part-Datei gespeichert, bis die endgültige Datei zusammengestellt ist.

3. Chunks zusammenführen:

   • if ($chunkIndex == $totalChunks - 1): Wenn der letzte Chunk hochgeladen wird, führt das Skript alle Chunks 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 das Herunterladen von Dateien.

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 die richtigen 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 sie als Block hochzuladen.
   • uploadChunk(): Lädt jeden Chunk rekursiv hoch, aktualisiert den Fortschrittsbalken und den Status und führt die Chunks 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.

---

Fazit:

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

Das obige ist der detaillierte Inhalt vonTEIL# Effizientes Dateiübertragungssystem mit HTTP für große Datensätze. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!