AJAX Datei Upload

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • AJAX Datei Upload

    Hallo,

    ich nutze das JavaScript prototype Framework und versuche Dateien über einen POST an ein PHP Script zu senden.

    Ohne AJAX funktioniert das Script, ich will den Dateiupload aber im Hintergrund von statten gehen lassen.

    Hier mein momentaner Code:

    Quellcode

    1. <script type="text/javascript">
    2. [...]
    4. function uploadFiles(){
    6. var param = "datei1="+escape($F("datei1"));
    7. new Ajax.Request("inc/upload.php", {
    8. method: "post",
    9. parameters: param,
    10. onComplete: uploaded()
    11. });
    13. return false;
    14. }
    16. function uploaded(){
    17. [...]
    18. return false;
    19. }
    20. </script>
    22. [...]
    24. <div id="UL">
    25. <h2>Datei Upload</h2>
    26. <form onsubmit="return uploadFiles();" method='post' enctype='multipart/form-data'><table>
    27. <tr><th>Datei 1:</th><td><input type='file' id="datei1" name='datei1'><br></td></tr>
    28. </form></table>
    29. [...]
    Alles anzeigen


    Kurze erläuterung:

    $F() sowie Ajax.Request() sind Funktionen des Prototype Frameworks.
    $F() liest den Inhalt eines Formulares aus. (In meinem Fall vom Type "file"). Ajax.Request erzeugt mir recht komfortabel den XMLHttpRequest, den ich dann über die Parameter leicht ansteuern kann.

    Problem ist nun aber, das ich das file-Array nicht an das PHP-Script verschicken kann.

    Hat vielleicht jemand noch ein Script, wo ein Datei-Upload über Ajax realisiert ist oder kann mir jemand bei meinem Problem helfen?

    Gruß,
    Blue

  • interesssantes problem,
    aber soweit ich weiß kommst du mit ajax leider nicht an den inhalt der datei ran...
    bzw. kannst du damit nicht den upload steuern

    folgendermaßen kannst du es realisieren
    upload button wird geklickt und an ein unsichtbares popup gesendet (hoffentlich wirds nicht vom popupblocker gesperrt)

    Quellcode

    1. <form ... target="popup" onsubmit="window.open('upload.php','popup','width=1,height=1,screenX=-100,screenY=-100');">


    dort machst du deinen stinknormalen upload mit php (und optional einen datenbankeintrag mit dem dateinamen und der dateigröße)

    in der hauptdatei könntest du dann mit AJAX den datenbankinhalt prüfen..
    dateinamen und -größe auslesen..
    und dann mittels [phpdoc]filesize[/phpdoc] sogar einen fortschrittsbalken integrieren

    und das tolle ist, dass du auf der seite rumklicken kannst, weil der upload ja im popup läuft

    um zu überprüfen, dass das popup nicht geschlossen wird, fängst du dass am besten mit einem onClose ab - (ich glaub die funktion gibts gar nicht mehr)

  • wenn Du als target des Forms einfach ein iframe ansteuerst, das Du mit CSS einfach mit "width:1px;height:1px;display:none" auf derselben Seite "versteckst"


    Quellcode

    1. display: none;
    läd den iFrame garnicht erst. Wenn, dann musst du das mit

    Quellcode

    1. visibility: hidden;
    "verstecken".


    aber soweit ich weiß kommst du mit ajax leider nicht an den inhalt der datei ran...
    bzw. kannst du damit nicht den upload steuern

    Das Problem liegt im HTTP Protokoll bzw. in den jeweiligen JS-Interpretern. Für einen Dateiupload wird der PUT-Header des HTTP Protokolls gesendet gefolgt von der Datei. Du kannst aber mit JS diesen Header weder senden noch den Statuscode abfragen. Für alle, die dies jetzt versuchen: es funktioniert nicht, also versucht es garnicht erst.