Forschritt von Datei Uploads (PHP 5.2)

  • Mach für die Installation im Webserver besser einen seperaten Thread im Webserver Forum auf.

    Ansonsten muss du natürlich nicht die Yahoo Lib benutzen.
    * Erstelle dir dein Hauptdokument mit diesem Code [coderwiki]HowTos/Ajax-Server-zu-Client-Kommunikation[/coderwiki]
    * Füge einen Frame mit einem normalen Upload Formular ein [coderwiki]HowTos/MySQL-Dateiupload[/coderwiki]
    * Erzeuge dir deine ID und speichere sie in der Session
    * Übertrage sie auch beim Upload als APC_UPLOAD_PROGRESS
    * in der status.php verwendest du folgenden Code:

    Quellcode

    1. print_r(apc_fetch('upload_'.$_SESSION['deine_uploadid']))

  • Mhm...

    Naja ich habe jetzt mal das Beispiel hier genommen http://progphp.com/progress.phps zeigt auch die Upload Status Box an aber nicht denn Status des Uploads sprich es wird am Ende kurz mal 100 % angezeigt mehr aber auch nicht!

    hm komische Sache!!!

    Das Formular sollte doch so aussehen? Obwohl ich irgendwo mal gelesen habe das man das ein target Frame senden muss!!!

    <form enctype="multipart/form-data" id="upload_form" action="index.php" method="POST" onsubmit="showuploadstatus()">
    <input type="hidden" name="APC_UPLOAD_PROGRESS" id="progress_key" value="<?php echo $_SESSION["uid"]; ?>"/>
    <input type="file" name="file1"/>
    <br/>
    <input type="submit" value="Upload!"/>
    </form>

  • Super Idee! :wink: (Code einrücken ich weiß!!!)

    Habe jetzt mal dieses hier genommen da ich eigendlich mehrere Version probiert habe...

    upload.php

    Quellcode

    1. <html>
    2. <head>
    3. <script type="text/javascript" src="js/prototype.js"></script>
    4. <script type="text/javascript" src="js/scriptaculous.js?load=effects,dragdrop"></script>
    5. <script type="text/javascript" src="js/uploads.js?p=1164196800"></script>
    6. <link rel="stylesheet" type="text/css" href="style.css" />
    7. </head>
    8. <body>
    9. <form enctype="multipart/form-data" id="formulaire" action="#" method="POST">
    10. <input type="hidden" name="APC_UPLOAD_PROGRESS" id="progress_key" value="45643bc03f565"/>
    11. <input type="file" id="test_file3" name="test_file3"/>
    12. <div id="progress" style="display:none"><div id="pbar"></div><div id="ppct">0%</div></div>
    14. <script type="text/javascript">Event.observe("formulaire","submit",progress);</script>
    15. <input type="submit" value="Upload!"/>
    16. </form>
    17. </body>
    18. </html>
    Alles anzeigen


    upload_progress.php

    Quellcode

    1. <?php
    2. if(isset($_POST['progress_key'])) {
    3. echo json_encode(apc_fetch('upload_'.$_POST['progress_key']));
    4. exit;
    5. }
    6. ?>


    style.css

    Quellcode

    1. body,input{
    2. font:.85em 'Trebuchet MS';
    3. }
    4. #progress{
    5. height: .85em;
    6. width: 300px;
    7. border:1px solid #000;
    8. margin:3px 0 3px 0;
    9. cursor:move;
    10. }
    11. #progress #pbar{
    12. background: #FFC300;
    13. height: .90em;
    14. width:0%;
    15. float:left;
    16. }
    17. #progress #ppct {
    18. font:.80em 'Trebuchet MS';
    19. margin: -2px auto 0 auto;
    20. text-align:center;
    21. }
    Alles anzeigen


    uploads.js

    Quellcode

    1. function arrondi(m){return (Math.round(m*100))/100}
    2. function mega(m){return arrondi(parseFloat(m/(1024*1024)))}
    3. function uploadTermine(r){
    4. if (r['cancel_upload']) txt = "Transfert annulé !";
    5. else txt = mega(r['total'])+" Mo transférés !";
    6. $('pbar').style.width = "100%";
    7. if (txt) txt = " ("+txt+")";
    8. $('ppct').update("100%"+txt);
    9. }
    10. function progressStatus(o){
    11. var r = eval('('+o.responseText+')');
    12. if(!r['done']){
    13. if(r['total']){
    14. var pct = arrondi(parseFloat(100*(r['current']/r['total'])));
    15. $('pbar').style.width = pct+'%';
    16. txt = pct+"% ("+mega(r['current'])+"/"+mega(r['total'])+" Mo)";
    17. }
    18. }else if (r['cancel_upload']) txt = "Transfert annulé !";
    19. else if (r['current']==r['total']) uploadTermine(r);
    20. $('ppct').update(txt);
    21. }
    22. function updateProgress(){
    23. new Ajax.Request('ajax/upload_progress.php',
    24. {parameters:'progress_key='+$F('progress_key'),onComplete:progressStatus}
    25. );
    26. }
    27. function progress(){
    28. new Draggable('progress',{revert:true});
    29. new PeriodicalExecuter(updateProgress,1); $('pbar').style.width = "0%";
    30. $('ppct').update("0%");
    31. Effect.Appear('progress',2);
    32. }
    Alles anzeigen


    Und dann halt noch die prototype.js & die scriptaculous.js

    Naja das hab ich irgendwo gehen tuts aber nicht! Und ich stehe voll auf der Leitung...

  • Den PHP Upload und den AJAX Request kannst du nicht von Haus aus gleichzeitig auf einer Seite machen. Die YAHOO UI kanns ;) Soweit ich weiß kann Prototype das aber nicht. Jedenfalls musst du eine entsprechende Funktion aufrufen und so wie es jetzt ist klappts nicht.

    Daher habe ich dir den Upload im Ifame empfohlen. In der Hauptseite machst du dir eine uniqueid. Mit dieser fragst du per SESSION oder POST sekündlich die upload_progress.php und stellst diese erstmal da.

    Wenn alles dargestellt wird, kannst du dich ja um Details wie die Visualisierung kümmern.

    Und kümmer dich erst später um die Visualisierung! Da könnten ja noch tausende Fehlerquellen lauern. Soweit ich weiß musst du JSON zum Parsen mit Prototype im X-Header übertragen. Aber wie gesagt... schieb das erstmal auf.

  • Nein, ich meine "vom" Frame senden:

    Als index.php nimmst du das Server-Client-Beispiel und baust einen IFRAME ein.
    <iframe src="upload.php"></iframe>

    Bei der upload.php benutzt du ein normales Formular + dem neuen Upload Feld:
    <input type="hidden" name="APC_UPLOAD_PROGRESS" value="<?php echo $_SESSION['deine_uploadid'] ?>"/>

    Bei der status.php verwendest du das print_r von oben.

    Um nochmal um dein Posting weiter oben zurückzukommen, dass sofort auf 100% gesprungen wird. Lass dir mal den responseText komplett ausgeben, bevor du ihn als JSON Objekt parst.

    //EDIT: Hab das Online YUI Beispiel nun auch mal getestet. Da erhalte ich auch keine Prozent.

  • Wenn es JavaScript spezifisch ist, dann natürlich ins JavaScript Forum.
    Aber eine Extension besteht ja aus mehr als aus JavaScript.
    Wenn du es nicht eingrenzen kannst, dann poste im Allgemeinen Forum.


    Update
    Eine komplette Anleitung um einen Upload Fortschritt unter PHP zu visualisieren findet ihr jetzt im Wiki:
    [coderwiki]HowTos/PHP-AJAX-Upload-Fortschritt[/coderwiki]