• Apfeltalk ändert einen Teil seiner Allgemeinen Geschäftsbedingungen (AGB), das Löschen von Useraccounts betreffend.
    Näheres könnt Ihr hier nachlesen: AGB-Änderung
  • Viele hassen ihn, manche schwören auf ihn, wir aber möchten unbedingt sehen, welche Bilder Ihr vor Eurem geistigen Auge bzw. vor der Linse Eures iPhone oder iPad sehen könnt, wenn Ihr dieses Wort hört oder lest. Macht mit und beteiligt Euch an unserem Frühjahrsputz ---> Klick

jQuery AJAX Fileupload - Server erhält zu große Daten

rilight

Alkmene
Registriert
11.04.12
Beiträge
35
Hallo liebes Forum,

ich habe diese Frage schon in einem anderen Forum gestellt, jedoch nach 5 Tagen immer noch keine problemlösende Antwort bekommen.
Der original Post ist bei PSD-Tutorials unter folgendem Link zu finden: original Post.

Das Problem ist folgendes:

Ich möchte von der Clientseite Daten mit Ajax hochladen. Dazu bin ich wie folgt vorgegangen:

1) HTML Formular zum auswählen von Dateien
2) jQuery ermittelt FileList mit den ausgewählten Dateien
3) HTML5 FileApi FileReader erzeugt und die Datei eingelesen
4) jQuery - Post Methode zum upload der Datei benutzt
5) auf der Serverseite mit PHP entgegengenommen

Quellcode Client:
Code:
<!Doctype HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Dateiupload mit Javascript</title>
        
        <style type="text/css">
            #output
            {
                width        : 350px;
                border        : 1px dotted black;
                padding        : 10px;
                margin-top    : 25px;
            }
        </style>
    </head>
    
    <body>
        <h2>Meine kleine Spielwiese</h2>
        <form id="fileUpload" action="upload.php" method="POST" enctype="multipart/form-data">
            <input type="file" name="dateien[]" id="uploadInput" multiple="multiple">
            <input type="button" value="upload starten" id="uploadStart">
        </form>
        <div id="output"></div>
        
        <!-- JavaScript Bereich -->
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $("document").ready(function() {
                
                $("#uploadStart").click(function() {
                    // input auswaehlen
                    var dateien    = $("#uploadInput")[0].files;
                    console.log(dateien);
                    
                    // groesse feststellen
                    var groesse    = dateien.length;
                    
                    // jedes Element durchgehen
                    for(var i = 0, datei = dateien[i]; i < groesse; ++i)
                    {
                        var dateiName = datei.name;
                        var reader = new FileReader();
                        reader.onload = function()
                        {
                            console.log(reader);
                            console.log(reader.result.length);
                            //console.log(reader.result);
                            /*
                            $.ajax({
                                url            :    "upload.php",
                                type        :    "POST",
                                timeout        :    5000,
                                processData    :    false, // data nicht in String konvertieren
                                data    : {
                                    "file_name"    :    dateiName,
                                    "file"        :    this.result
                                },
                                headers        : {
                                    "enctype"    :    "multipart/form-data",
                                    "encoding"    :    "multipart/form-data"
                                }
                            });
                            */
                            $.post('upload.php', {
                                file_name    :    dateiName,
                                file        :    reader.result
                            }, function( data ) {
                                $("#output").append(data);
                            });
                        }
                        reader.readAsBinaryString(datei);
                    }
                });
                
            });
        </script>
    </body>
</html>

Code Serverseite:
Code:
<?php

if( isset($_FILES['file']) )
{
    echo '$_File isset'."\n";
}
elseif( isset($_POST['file']) && isset($_POST['file_name']) )
{
    $upload_dir    = 'upload/';
    $file_name    = $_POST['file_name'];
    $file        = $_POST['file'];
    
    $handle        = fopen($upload_dir.$file_name, 'wb');
    fwrite($handle, $file);
    fclose($handle);
    
    echo '$_POST isset'."\n";
    echo 'strlen(file_name)'.strlen($_POST['file_name'])."\n";
    echo 'strlen(file)'.strlen($_POST['file'])."\n";
    echo 'strlen(urldecode(file))'.strlen(urldecode($_POST['file']))."\n";
}
else
{
    echo 'nothing isset'."\n";
}

?>

Ich habe zum Testen immer ein Bild benutzt. Es is auf der Clientseite 53.367 Byte, aber auf Serverseite 79.034 Byte groß.
Wieso ist es auf der Serverseite größer?
Ich denke es hat etwas mit dem encoding zu tun, denn es sind Binärdaten und keine normalen Zeichen.
Öffnen lässt sich das Bild auf Serverseite nicht.

Merkwürdig ist auch, dass der Upload nicht in $_FILES zur Verfügung steht, wie es laut PHP-Manuel sein müsste.


Für eure Hilfe wäre ich sehr dankbar !
rilight