PHP rocks! wünscht allen Mitgliedern einen guten Rutsch ins neue Jahr 2017 !!!
Hinweis: Das Forum zieht um! Um keine Datenverluste zu haben, schalten wir zwecks Übernahme der Daten das Forum am Sonntag, den 24.04.2016 um ca. 21:00 Uhr offline und passen anschliessend die DNS-Einträge an.
www.php-rocks.de wird euch dann nach den Aktualisierungen der DNS-Server wieder wie gewohnt uneingeschränkt zur Verfügung stehen.
Danke für euer Verständnis!

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Dateiupload
#1
Hallo,
ich weiß nicht, ob es zu den Basics von HTML zählt, hoffe es aber mal.

Ich habe ein Uploadscript, welches auch tadellos funktioniert. Nur eine Kleinigkeit ist optisch nicht so schön. Hier erstmal der Kern der Sache, der HTML-Uploadteil:

Code:
<form action='".$PHP_SELF."' enctype=\"multipart/form-data\" method='post'>
  <input type='hidden' name='was' value='doit'>
  <input type='file' name='bild'>
  <input type='submit' value='Hochladen'>
</form>

Das Script ruft sich nach absenden selber auf (was dann der PHP-Teil des Affenformulars ist oder wie man das nennt). Es werden nach absenden Dateigröße, Dateiart, etc. überprüft. Es wird ein "Durchsuchen"-Button angezeigt, man wählt die Datei aus.
Was mir nicht so ganz gefällt ist, klickt man auf den Button "Hochladen", wird optisch kein Ladevorgang angezeigt, also sowas wie sich ein drehendes GIF oder so.

Kann man sowas in einem solchen einfachen Uploadvorgang bei klick auf "Hochladen" noch integrieren? Wenn ja, wie muss man da vorgehen? Ich vermute, es könnte mit JavaScript gehen, wovon ich wirklich Null Ahnung habe.

Ich bin für Tipps und Ratschläge voll Ohr.
Vielen Dank
Antworten
#2
Hallo,

Um JS kommst Du dabei imho nicht rum, aber es gibt bereits gute Upload-Scripte, vielleicht ist ja da eins für Dich dabei.
Ansonsten könnte ich Dir evtl. die Tage ein kleines Beispiel erstellen.

Was mir bei Deinem Code auffällt:
Du solltest DoubleQuotes für HTML verwenden und in dem Fall dann die SingleQuotes in PHP.
Zusätzlich ist die Angabe des action-Attributes für ein Affenformular in HTML5 nicht mehr notwendig.
Evtl. würde ich auch einen Button verwenden als Submit:
Code:
<form enctype="multipart/form-data" method="post">
 <input type="hidden" name="was" value="doit">
 <input type="file" name="bild">
 <button type="submit">Hochladen</button>
</form>

Eine mögliche Vorgehensweise wäre jetzt, auf den Button ein Click-Event Handler zu legen und den Upload-Vorgang einzuleiten.
Vorteil der JavaScript-Variante ist, dass Du vor dem Upload bereits Prüfungen durchführen kannst, wie bspw. Dateigröße, etc.

Der Upload wäre dann ein kurzer Ajax-Request.
Während dessen kann der Button-Text in "Bitte warten..." geändert werden und/oder ein animiertes GIF in stattdessen angezeigt werden.
Antworten
#3
Danke für deine Antwort. Leider ist nichts hilfreiches für mich dabei. Mit einigen Begriffen kann ich noch nicht mal etwas anfangen, da ich wie schon geschrieben habe, nichts von JavaScript verstehe. Ein anderes Uploadscript kommt für mich nicht in Frage, brauchte sehr viel Zeit schon dafür. Entscheidend bei allem ist für mich das verstehen. In diese Kategorie fällt leider deine Antwort nicht.
Dennoch danke sehr
Antworten
#4
Naja, ein Beispiel habe ich Dir ja angeboten. Kann ich Dir zum WE mal fertig machen.
Dann versuchste das halt zu verstehen. Kannst ja auch gern wieder fragen, wenn Du was nicht verstanden hast.
Dabei lernst Du dann die Begriffe auch. Ansonsten kannst Du die auch googlen, um evtl. schon mal ein Grundverständnis zu bekommen.

Gruß Arne
Antworten
#5
(24.11.2016, 12:40)Arne Drews schrieb: Kann ich Dir zum WE mal fertig machen.
Danke, zu welchem? Mir ist es zu hoch. Confused
Antworten
#6
Ach so, ich hatte nicht mitbekommen, dass Interesse besteht, sorry.
Ich denke, ich sollte das am Sonntag irgendwann schaffen.

Schöne Grüße
Arne
Antworten
#7
(02.12.2016, 01:38)Arne Drews schrieb: Ach so, ich hatte nicht mitbekommen, dass Interesse besteht, sorry.

Das ist dann wohl meine Schuld, hätte es ja sagen können.
Das wäre nett etwas Hilfe zu bekommen.

Danke
Antworten
#8
Hi,

Also hier mal der Formular-Aufbau mit Loader-Grafik:
Code:
<form name="upload" enctype="multipart/form-data" method="post">
    <input type="hidden" name="was" value="doit">
    <input type="file" name="bild">
    <button id="submit" type="submit">Hochladen</button>
</form>

<div id="loader"><img src="please-wait.gif" alt="Bitte warten..."></div>

Den DIV#loader blendest Du über CSS aus:
Code:
DIV#loader { display:none; }

Das JavaScript sähe dann bspw. so aus:
Code:
window.onload = function() {


    var _frmUpload = document.getElementsByTagName( 'form' )[0];
    var _btnSubmit = document.getElementById( 'submit' );
    var _loadingImage = document.getElementById( 'loader' );


    _btnSubmit.addEventListener(
            'click',
            function (e) {
                
                e.preventDefault();
                this.innerHTML = 'Bitte warten...';
                this.setAttribute( 'disabled', true );

                _loadingImage.style.display = 'block';
                _frmUpload.submit();

            }

        );


}

Was ich allerdings dazu sagen muss ist, dass er das Formular so noch nicht absendet. Ich weiß leider grad nicht warum, weil alle Browser mir die Methode .submit() als unbekannt verkaufen wollen?!
Woran das grad liegt, kann ich nicht genau sagen, aber vielleicht kann ein Mitlesender das hier aufdecken?

Zumindest sieht der Ablauf so in etwa aus. Beim Klick auf den Button wird das GIF eingeblendet und bleibt so lange stehen, bis die Seite neu geladen wurde.

Sorry, dass es etwas länger gedauert hat, wir hatten Freitag und Samstag Kindergeburtstag und heute noch nen 40., ich bin froh morgen wieder zur Arbeit zu dürfen...  Big Grin

Gruß Arne
Antworten
#9
Es gibt nichts zu entschuldigen.

Mal ne bescheidene Frage. Das im Formular jetzt schon drinstehende <button id="submit" type="submit">Hochladen</button> startet doch auch jetzt schon den Upload. Ändert sich das durch die Angabe der ID etwa? Und wenn der Upload da schon startet, braucht man doch nur noch das Bild auf enabled schalten, oder?

So oder so, ich schaue mir das mal an.

Vielen Dank bis hierher. Verstanden habe ich den JS-Teil nicht.
Antworten
#10
Hi,

Die id="submit" habe ich nur gesetzt, damit ich darauf einfacher zugreifen kann.
So habe ich eine Referenz auf den Button über die JavaScript-Methode getElementById().
Mit dem Senden an sich hat die id nichts zu tun.

Den Standard-Prozess des Buttons, also das Einleiten des Upload-Prozesses unterbinde ich zunächst mit e.preventDefault();
Wenn ich mit allen Einstellungen durch bin. sende ich das Formular mit der submit() Methode ab.

Das Problem ist halt, dass meine Browser grad alle meckern, dass die Methode unbekannt ist, was aber eigentlich nicht sein kann.
Hier hat evtl. jemand anders noch eine Idee, wo mein Fehler liegt.

Aber vom Ablauf her, ist das eine von vielen Möglichkeiten, für das was DU haben willst.

Gruß Arne
Antworten


Gehe zu: