php File Upload mit Progress Bar (AJAX)

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • php File Upload mit Progress Bar (AJAX)

    Hi zusammen,

    Ich bin gerade dabei einen Fileuplod mit Progressbalken auf Basis der PECL Extension uploadprogress zu realisieren.

    Beim Start des Dateiuploads rufe ich per onSubmit-Ereignis eine Funktion auf.

    PHP-Code:
    <form onsubmit="UP.start('{$upload_id}');" action="index.php?cmd=news" method="post" enctype="multipart/form-data" name="upload_form" target="ifr2"
    Intern ruft UP.start regelmäßig die Funktion
    PHP-Code:
    requestInfo: function() {
        
    //ifr = document.getElementById("ifr");
        
    ifr.src="info.php?ID="+upload_id+"&"+new Date();
    }, 
    Wie ihr erahnen könnt, handelt es sich bei ifr um ein iframe, bei dem bei jedem Update das src-Attribut neu angegeben wird und es dadurch zu einem Refresh des iframes kommt.
    Im Internet Explorer entsteht dabei allerdings jedes mal dieses <Click>-Geräusch und auch im Firefox verwandelt sich kurzerhand der Mauszeiger in ein Lade-Symbol.

    Ich würde es deswegen gerne so machen, dass nicht jedesmal ein iframe neu geladen wird, sondern sich das innerHTML eines DIVs ändert.
    Die Seite http://talks.php.net/show/torkey06/24 ( Demo: http://progphp.com/progress.php ) demonstriert recht anschaulich, was ich erreichen möchte...

    Ich steh aber leider total aufm Schlauch. Wie kann ich das innerHTML eines DIVs alle 2 Sekunden ändern? Wie kann ich aus Javascript heraus einen php-Script aufrufen?

    Für jeden Denkanstoß bin ich echt dankbar... Ich weiß grad echt nicht weiter.
    Grüße, Chrissi
    Our Dreams are Wings

  • #2
    Kennt keiner eine Javascriptfunktion, die das Ergebnis einer php-Seite auslesen kann?
    Grüße, Chrissi
    Our Dreams are Wings

    Kommentar


    • #3
      Google(AJAX).
      AJAX macht genau was du willst - nur ggf. mit XML und JSON und was noch alles. Kann aber auch einfach nur plain text.

      Ein netter Guide zum übersichtlichen Schreiben von PHP/MySQL-Code!

      bei Klammersetzung bevorzuge ich jedoch die JavaCoding-Standards
      Wie man Fragen richtig stellt

      Kommentar


      • #4
        Original geschrieben von Chrissi007
        Kennt keiner eine Javascriptfunktion, die das Ergebnis einer php-Seite auslesen kann?
        Es gibt keine einfache Funktion. Um Requests an Webserver zu schicken und die Antworten auszuwerten, gibt es das XMLHTTPRequest-Objekt. Das ist der Kern des modernen Remote-Scriptings, oder AJAX, wie es vom Marketing getauft wurde.

        Wie man das XMLHTTPRequest-Objekt benutzt, erfährst du (unter Anderem) hier:
        http://ajaxpatterns.org/XMLHttpRequest_Call
        und hier:
        http://developer.apple.com/internet/...mlhttpreq.html

        Für eine Upload-Progress-Anzeige reicht es meistens, wenn das antwortende Server-Script einen zweizeiligen Text liefert: Erste Zeile "hochgeladene Bytes", zweite Zeile "insgesamt hochzuladene Bytes". XML- oder JSON-formatierte Daten zu versenden, macht nur das Server-Script aufwändiger als nötig.
        Klingon function calls do not have “parameters”‒they have “arguments”‒and they always win them!

        Kommentar


        • #5
          Warum wieder mal das Rad neu erfinden ...


          http://swfupload.org/

          oder mit Mootools:
          http://digitarald.de/project/fancyupload/

          nutzt zwar alles kein PECL, tut aber das was du im Endeffekt willst
          Zuletzt geändert von derHesse; 25.01.2009, 09:58.

          Kommentar


          • #6
            Original geschrieben von derHesse
            Warum wieder mal das Rad neu erfinden ...

            http://swfupload.org/

            oder mit Mootools:
            http://digitarald.de/project/fancyupload/

            nutzt zwar alles kein PECL, tut aber das was du im Endeffekt willst
            Nunja, Flash-Scripts einzuspannen um Dateien hochzuladen, ist wohl eher vom Typ "Rad neu erfinden". Schließlich können das Browser schon seit Jahrzehnten ohne Plugin[3].

            Und was die JavaScript-Lösung angeht: Ich kenne MooTools zwar allenfalls oberflächlich, aber ES GIBT (BISHER[1]) KEINE REINE JAVASCRIPT-LÖSUNG für File-Uploads mit Progress-Bar, schlicht und ergreifend deshalb, weil der Server den Upload-Fortschritt ermitteln muss -- mit JavaScript kommt man da (bisher[1]) nicht ran. Und PHP ist so ein Sonderfall, da ist der Fileupload so verkorkst gelöst[2], da braucht es halt diese komische PECL-Erweiterung, die nur für diesen einen Zweck erfunden wurde. Mit Perl, Python oder anderen sinnvollen Server-Sprachen kommt man an die File-Upload-Daten wesentlich einfacher ran.

            --
            [1] Die Browser geben die Infos bisher nicht raus. Könnte sich aber ändern.
            [2] Frei nach dem alten IT-Motto: "Unsere Lösung -- Ihr Problem!"
            *und_nachschieb*
            [3] Dass ein Flash-Script den Komfort beim Datei-Upload verbessern kann, ist klar.
            Zuletzt geändert von fireweasel; 26.01.2009, 20:18.
            Klingon function calls do not have “parameters”‒they have “arguments”‒and they always win them!

            Kommentar


            • #7
              Original geschrieben von fireweasel
              [B]Nunja, Flash-Scripts einzuspannen um Dateien hochzuladen, ist wohl eher vom Typ "Rad neu erfinden". Schließlich können das Browser schon seit Jahrzehnten ohne Plugin.
              Für die Flash-Lösung spricht im allgemeinen auch eher, dass man auf einen Wisch mehrere Dateien hochladen kann, ohne die vorher packen zu müssen.

              Das dass ganze nur in bestimmten Browser/Betriebssystem-Kombinationen gut funktioniert, macht es dann aber auch wieder überflüssig.
              [FONT="Helvetica"]twitter.com/unset[/FONT]

              Shitstorm Podcast – Wöchentliches Auskotzen

              Kommentar


              • #8
                Original geschrieben von unset
                Das dass ganze nur in bestimmten Browser/Betriebssystem-Kombinationen gut funktioniert, macht es dann aber auch wieder überflüssig.
                Nein. Es bricht es maximal auf ein Goodie runter.
                Wer 200 Bilder hoch laden will, und das möglichst einfach, muss dann halt Flash haben - und wird sich dann über diese Lösung garantiert freuen. Man stelle sich jedoch mal vor man müsste 200 Bilder über ein normales HTML-Formular einzeln auswählen und hoch laden ... zumindest ich hab noch andere Dinge zutun...

                Alternativ bieten sich noch Lösungen über z.B. ZIP-Datei an, mit dem Problem, dass wenn der Transfer in der Mitte des 500MB Files abbricht, man noch mal von ganz vorne anfangen kann...

                in kurz: Ich würde nicht behaupten, dass die Flash-Lösungen überflüssig wären.

                Ein netter Guide zum übersichtlichen Schreiben von PHP/MySQL-Code!

                bei Klammersetzung bevorzuge ich jedoch die JavaCoding-Standards
                Wie man Fragen richtig stellt

                Kommentar


                • #9
                  Original geschrieben von ghostgambler
                  Nein. Es bricht es maximal auf ein Goodie runter.
                  Wer 200 Bilder hoch laden will, und das möglichst einfach, muss dann halt Flash haben
                  Das reicht aber noch nicht aus ...
                  [FONT="Helvetica"]twitter.com/unset[/FONT]

                  Shitstorm Podcast – Wöchentliches Auskotzen

                  Kommentar


                  • #10
                    danke für eure hilfe - hat mir sehr geholfen!

                    ps: bin auch zwischenzeitlich noch über folgende seite gestoßen, vielleicht für den ein oder anderen noch interessant: http://ajax.frozenfox.at/
                    Grüße, Chrissi
                    Our Dreams are Wings

                    Kommentar


                    • #11
                      Eine Frage hätte ich noch diesbezüglich.

                      Ich lass mir momentan per RequestObjekt php-seitig generierten HTML-Quelltext zurückgeben.

                      Code:
                      var content = request.responseText;
                      // den Inhalt des Requests in das <div> schreiben
                      document.getElementById('show_file_progress').innerHTML = content;
                      request.responseText ist der Inhalt, der dabei vom php-Script erzeugt und von Javascript empfnagen wird. Wie ihr seht speicher ich das ganze Zeug in der Variable $content ab und verändere dann das div dementsprechend, indem ich das innerHTML des divs den Inhalt aus content übergebe.

                      In diesem Content habe ich jetzt aber auch noch eine Javascript-Anweisung eingebaut.

                      Code:
                      [... hier weiter oben ist HTML-Quelltext...]
                      <script type="text/javascript">
                      	rolldown_show("upload_in_progress");
                      </script>
                      kurz: dieser Codeschnippsel soll einfach eine Javascript-Funktion aufrufen.
                      Allerdings wird rolldown_show(); nie aufgerufen.

                      Ich hab auch schon so Sachen probiert wie ein eval() um den ganzen Bereich zu setzen, allerdings bringt das auch nichts.

                      Weiß jemand an was das liegen könnte, dass das Javascript nicht ausgeführt wird?
                      Grüße, Chrissi
                      Our Dreams are Wings

                      Kommentar


                      • #12
                        Google...
                        Bist 100%tig nicht der erste mit dem Problem.
                        (Das weiß ich weil ich es auch schon hatte...)

                        Ein netter Guide zum übersichtlichen Schreiben von PHP/MySQL-Code!

                        bei Klammersetzung bevorzuge ich jedoch die JavaCoding-Standards
                        Wie man Fragen richtig stellt

                        Kommentar


                        • #13
                          Original geschrieben von Chrissi007
                          Eine Frage hätte ich noch diesbezüglich.

                          Ich lass mir momentan per RequestObjekt php-seitig generierten HTML-Quelltext zurückgeben.
                          Warum?
                          Hatte ich nicht schon erwähnt, dass es vollkommen genügt, nur die Daten zu übermitteln?
                          Ob als XML, JSON, CSV oder sonst wie ist egal, aber bitte NUR DIE DATEN und nicht die halbe Darstellungslogik (HTML + JavaScript)!

                          Code:
                          var content = request.responseText;
                          // den Inhalt des Requests in das <div> schreiben
                          document.getElementById('show_file_progress').innerHTML = content;
                          request.responseText ist der Inhalt, der dabei vom php-Script erzeugt und von Javascript empfnagen wird. Wie ihr seht speicher ich das ganze Zeug in der Variable $content ab und verändere dann das div dementsprechend, indem ich das innerHTML des divs den Inhalt aus content übergebe.

                          In diesem Content habe ich jetzt aber auch noch eine Javascript-Anweisung eingebaut.
                          Das ist noch schlimmer als bei jedem Request unnötig die HTML-Daten zu übertragen. Wo, zum Geier, hast du gelernt, dass man ausführbaren Code per Remote-Scripting zum Client schicken soll? Sagt dir das Wort "Code-Injection" nichts?

                          Code:
                          [... hier weiter oben ist HTML-Quelltext...]
                          <script type="text/javascript">
                          	rolldown_show("upload_in_progress");
                          </script>
                          kurz: dieser Codeschnippsel soll einfach eine Javascript-Funktion aufrufen.
                          Allerdings wird rolldown_show(); nie aufgerufen.
                          Und was spricht dagegen, die Funktion, die die lustige Animation durchführt, schon beim erstmaligen Laden des HTML-Dokuments einzubinden? Und dann nur noch nach jedem Poll mit den passenden Parametern aufzurufen, anstatt das Ganze jedesmal per XMLHTTPRequest anzufordern in den DOM-Baum einzufügen und dann (in Unkenntnis der Sachlage) zu versuchen, darin eingebasteltes JavaScript auszuführen?

                          Weiß jemand an was das liegen könnte, dass das Javascript nicht ausgeführt wird?
                          Hmmm, der Browser ist sich anscheinend sicher, dass der von dir gewählte Weg keine gute Idee ist. Du solltest auf ihn hören ... ;-)
                          Klingon function calls do not have “parameters”‒they have “arguments”‒and they always win them!

                          Kommentar


                          • #14
                            Das kommt dabei raus wenn ein Jscript Noob versucht ne AJAX-Anwendung zu bauen...

                            Ach schei... ich hab echt keinen blaßen Schimmer...

                            Könntest du mir vielleicht noch eine kleine Info mir mit auf den Weg geben: Wie ich mit php json-enkodierte Dinge erstelle und an Javascript sende ist mir soweit klar, aber wie krieg ich intern in Javascript dieses Json-Zeugs in eine Variable rein? Also ich muss die json-enkodierte Zeichenkette, die von php kommt, in Javascript ja irgendwie ausführen, oder?


                            Das ist noch schlimmer als bei jedem Request unnötig die HTML-Daten zu übertragen. Wo, zum Geier, hast du gelernt, dass man ausführbaren Code per Remote-Scripting zum Client schicken soll? Sagt dir das Wort "Code-Injection" nichts?
                            Ich versteh deine Besorgnis und Code-Injection sagt mir schon was. Nur wusste ich nicht, dass das im Zusammenhang mit Javascript auch ne Rolle spielen kann. Ich mein... hmm... ich seh nicht so genau, an welcher Stelle hier ein Angriff möglich wäre? Der Client empfängt ja nur Daten aus einem Script. Und das Script könnte ich ja genauso gut auch per Browser aufrufen.
                            Grüße, Chrissi
                            Our Dreams are Wings

                            Kommentar


                            • #15
                              Schau dir doch mal die Element.update-Methode von Prototype an, die kann genau, was du suchst.
                              Btw: Ich finde das direkte Übergeben von HTML an den Browser nicht komplett daneben. Klar, eine saubere JSON - oder wie auch immer - Schnittstelle ist eindeutig sauberer, aber das direkte übergeben von HTML hat den Charm, das ich diese gerenderten Abschnitte auch direkt ohne Ajax verwenden kann und nicht zwei verschiedene Formate unterstützen muss. Gerade für etwas kurzfristige oder zeitkritische Projekte eine einfache Alternative, um trotzdem den Ajax-Vorteil nutzen zu können.

                              Kommentar

                              Lädt...
                              X