aktiven Upload anzeigen

Dieses Thema im Forum "Web-Know-how für die Homepage" wurde erstellt von Cold Steel, 14. Januar 2018.

  1. Cold Steel

    Cold Steel Megabyte

    Hallo,
    eine Frage zu einem Upload hätte ich. Wenn die Frage hier völlig fehl am Platze ist, seid so nett mir ein Forum zu nennen, welches da evtl. kompetenter ist.

    Ich betreibe auf meiner Homepage für meine Geschwister ein Austauschbereich für Dateien. Der ist nur durch Login zu erreichen, tut aber nicht zur Sache.

    Der relevante Teil im Uploadscript sieht so aus:
    HTML:
    <form name="form" action="upload.phtml" enctype="multipart/form-data" method="post" accept-charset="utf-8">
        <input type="file" name="bild">
        <input type="submit" value="Hochladen">
    </form>
    Es gibt noch ein Hiddenfeld, weil das Script sich selber aufruft -> upload.phtml

    Was ich jetzt erreichen möchte ist, der stattfindende Upload nach klick auf Hochladen/Submit soll angezeigt werden. Also wie überall zu sehen ein sich drehender Kringel oder ähnliches, kann auch eine prozentuale Fortschrittanzeige sein.

    Nur, ich weiß nicht, wie man sowas realisiert. Ich denke evtl. mit JS, wovon ich Null Ahnung habe.

    Kann mir jemand dazu Anregungen, Links und/oder Hilfe leisten?
    Bin schon durch etliche Googlelinks gestolpert, aber scheinbar nutze ich falsche Suchbegriffe.
    Wäre Klasse.

    Danke
     
  2. kalweit

    kalweit Hüter der Glaskugel

    Die Fortschrittsanzeige ist nicht trivial, da das mit den üblichen Mitteln nicht funktioniert. Der Upload selbst läuft auf Header-Ebene des HTTP-Request beim Seitenwechsel und die Anzeige im Browser geschieht clientseitig ohne Kommunikationsmöglichkeit zum Serverprozess. Einziger Ausweg ist es, den Upload per AJAX abzuwickeln - Stichwort: Ajax Upload Script. Wenn eine statische Lösung reicht, ergänze den form-Tag um eine onsubmit-Anweisung, die per Javascript ein annimiertes GIF auf der Webseite einblendet (am Einfachsten innerhalb eines absolut positionierten <div> Containers über die CSS-Eigenschaft "display:block" / "display:hidden"). Da nach dem Upload automatisch ein Seitenwechsel erfolgt, verschwindet das "GIF" dann ebenfalls.
     
  3. Cold Steel

    Cold Steel Megabyte

    Okay, nach dem lesen von dem Ajaxgedöns, kommt die Variante nicht in betracht. :bahnhof:

    Werde mich mit der statischen Lösung befassen und etwas einlesen.
    Danke erstmal
     
  4. Cold Steel

    Cold Steel Megabyte

    Komme leider nicht weiter. Ich habe jetzt ein GIF im Quellcode drinnen und ausgeblendet. Dann habe ich im Netzt gelesen es mit onclick einzublenden. Das passiert aber nicht.

    Im Augenblick habe ich das hier:

    HTML:
    <html>
    <head>
    <title>Upload</title>
    <script type="text/javascript">
    function click( id ) {
      var e = document.getElementById( id );
      e.style.display = '';
      }
    </script>
    </head>
    <body>
        <form name="form" action="upload.phtml" enctype="multipart/form-data" method="post" accept-charset="utf-8">
        <input type="file" name="bild">
        <input onclick="click('pic')" type="submit" value="Hochladen">
        </form>
    <img id="pic" style="display:none;" src="load.gif" alt="pic">
    </body>
    </html>
    Wie schon erwähnt, ich habe null Ahnung von JS.
    Funktioniert das so nicht?

    Ah, ich sehe den Fehler. Da das Script sich selbst aufruft, wird ja am Ende wieder display: none gesetzt. Wie umgehe ich das?
     
  5. VB-Coder

    VB-Coder Megabyte

  6. kalweit

    kalweit Hüter der Glaskugel

    Das "display:none" an der Stelle ist in Ordnung. Ändere mal
    Code:
    e.style.display = '';
    in
    Code:
    e.style.display = 'block';
     
  7. Cold Steel

    Cold Steel Megabyte

    Da isser wieder, der Bahnhof.
    Danke Dir

    Wird nichts angezeigt, bleibt hidden.

    Ich fürchte ich muss mein Affenformular aufgeben und zwei Dateien draus machen, was schade ist. Es ist über Jahre gewachsen mit Emailbenachrichtigung an alle Beteiligten bei einem Upload. Da sehe ich komplett durch und weiß wo ich evtl. eine Änderung machen muss.

    Allerdings würde ich es schon verstehen wollen, warum die onclick-Funktion nicht funktioniert.
     

Diese Seite empfehlen