File-Upload mit Fortschrittsbalken
Nico R.
0 
Rolf B
0 Nico R.
0 
Matthias Scharwies
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
-
Hallo Nico,
wenn viele kleinere Dateien zu übertragen sind, ist das ein durchaus brauchbares Vorgehen.
Bei wenigen großen Dateien ist es natürlich schwieriger. Was man tun kann, um den Kunden zu ermutigen, ist, nach der ersten Datei eine aktuelle Uploadgeschwindigkeit auszurechnen und daraus dann die verbleibende Restzeit zu bestimmen und anzuzeigen (die man dann im Sekundentakt herunterzählt). Das tut man nach jedem Upload erneut, und nach dem letzten sind es 0 Bytes und 0:00 Minuten.
Manche Benutzer könnten irritiert davon sein, dass die Restzeit dann nach jeder Datei "springt", mal rauf, mal runter. Da muss man den Nutzen gegen den potenziellen Motz-Rückfluss abwägen.
Rolf
--
sumpsi - posui - obstruxi-
Hallo Rolf,
wenn viele kleinere Dateien zu übertragen sind, ist das ein durchaus brauchbares Vorgehen.
Ja, für meinen Zweck ists in Ordnung. Da sinds in der Regel um die 50 Dateien mit je ca. 2 MB. Das heißt, da entstehen etwa 10 Pakete, da sieht das dann schon okay aus.
Bei wenigen großen Dateien ist es natürlich schwieriger. Was man tun kann, um den Kunden zu ermutigen, ist, nach der ersten Datei eine aktuelle Uploadgeschwindigkeit auszurechnen und daraus dann die verbleibende Restzeit zu bestimmen und anzuzeigen (die man dann im Sekundentakt herunterzählt). Das tut man nach jedem Upload erneut, und nach dem letzten sind es 0 Bytes und 0:00 Minuten.
Ahja, das ist natürlich auch keine schlechte Idee.
Manche Benutzer könnten irritiert davon sein, dass die Restzeit dann nach jeder Datei "springt", mal rauf, mal runter. Da muss man den Nutzen gegen den potenziellen Motz-Rückfluss abwägen.
In dem Fall könnte man den Wert ja einfach nicht aktualisieren, sondern normal weiter runterzählen, so lange bis es sich (so Gott will) wieder geglättet hat. Im schlechtesten Fall baut man natürlich immer mehr Rückstand auf und muss dann ggf. einen Riesensprung machen.
Vielleicht ists besser, gar keine Restzeit anzuzeigen, sondern das auch in einen Wert für den progress-Balken umzurechnen.
Gruß
Nico
-
-
Hallo zusammen,
Vielleicht kann das Script ja als Vorlage zur Erweiterung des Tutorials dienen.
Vielen Dank für deine Arbeit und dein Angebot!
Grundproblem unserer Tutorials ist es oft, dass man etwas Neues vorstellen will und dann eine Lösung auf der Suche nach einem Problem anbietet. Oft sind diese dann nicht praktikabel.
Hier haben wir ein gutes Beispiel als Grundlage für ein Tutorial!
Perfekt ist es mit Sicherheit nicht. An dem Deutsch-Englisch-Mischmasch der Variablennamen wird sich sicherlich der ein oder andere stören 😏
Das sind alles Kleinigkeiten! Nochmals danke!
Hinweise oder Verbesserungsvorschläge sind natürlich willkommen.
Herzliche Grüße
Matthias Scharwies
--
Was ist eine Signatur?