File-Upload mit Fortschrittsbalken

[Nico R.]

Hallo zusammen,

wie in diesem Beitrag besprochen, habe ich das Tutorial zum File Upload an meine Bedürfnisse angepasst (bei mir wird z.B. keine Dateiliste angezeigt, sondern nur die Vorschaubilder). Beim Upload wird jetzt ein Fortschrittsbalken angezeigt, und zwar (nach den Hinweisen von Felix und Rolf) nicht mehr über PHP ($_SESSION["upload_progress..."]), sondern per JS.

Dazu speichere ich zunächst die Dateigrößen aller ausgewählten Bilddateien im Array file_sizes[]. Nach dem Klick auf submit durchlaufe ich dieses Array und packe, je nachdem wie groß die Dateien sind und wie groß die maximale Paketgröße definiert ist, einzelne Versand-Pakete (bzw. Unterarrays mit den Schlüsseln der Dateien) im Array pakete[]. Danach schicke ich das erste Paket per fetch ab, warte auf den response und schicke dann das nächste Paket usw.

Entsprechend wird dann auch der Fortschrittsbalken gefüllt. Bei nur ein oder zwei Paketen ist das natürlich recht grob, bei größeren Dateimengen baut sich der Balken etwas "flüssiger" auf. Ist insgesamt vielleicht eine recht grobe Methode, aber dafür funktioniert es recht simpel und man sieht zumindest irgendeinen Fortschritt.

Das Script zum Testen findet ihr hier: https://fsv-optik.de/tests/galerie_upload.html Die maximale Paketgröße ist im Beispiel auf 5 MB eingestellt und man kann nur JPG-Dateien auswählen.

Vielleicht kann das Script ja als Vorlage zur Erweiterung des Tutorials dienen. Perfekt ist es mit Sicherheit nicht. An dem Deutsch-Englisch-Mischmasch der Variablennamen wird sich sicherlich der ein oder andere stören 😏 Hinweise oder Verbesserungsvorschläge sind natürlich willkommen.

Schöne Grüße

Nico