AJAX Formular: File Upload

[xep22]

hallo zusammen,

ich habe diese Art von Formular:

<form id="send" method="POST" enctype="multipart/form-data">
    <input type="text" class="form-control" placeholder="Name" name="name" id="name" required>
    <input type="file" class="form-control" name="file" id="file">

    <button type="submit" class="btn btn-primary" id="btnSubmit" data-callback="onSubmit">send</button>

    <br><br><div id="result"></div>
</form>

<script src="jquery.min.js"></script>
<script src="send.js"></script>

die send.js sieht so aus :

$(function(){
    var form=$('#send');
    var formMessages=$('#result');
    $(form).submit(function(e){
        e.preventDefault();
        var formData=$(form).serialize();
        $.ajax({
            type: 'POST',
            url: 'action.php',
            data: formData
        })
        .done(function(response){
            $(formMessages).html(response);
            $('#name').val('');
        })
        .fail(function(data){
            $(formMessages).html(data.responseText);
        });
    });
});

Die action.php gibt mir testweise name aus und ob eine Datei mitgesendet wurde, erhalte aber immer "nein". ohne das AJAX funktioniert es:

http_response_code(200);
echo $_POST['name'];

if(isset($_FILES['file']['name'])){
    echo "<br>Ja";
}else{
    echo "<br>Nein";
}

Woran liegt das genau ? was muss ich bei der send.js noch anpassen ?

 

[GroMag]

e.preventDefault();

Weil du die Standardfunktion damit unterdrückst und nur dein selbst geschriebenen Request abschickst.

var formData=$(form).serialize();
...
data: formData

Schau mal in $_POST, bei $_Files kommt so nichts an und das File sowieso nicht.

Aber wenn man mal Google bemühen würde, gibt es dort massen Tips und Tutorials.

 

[coolmodi]

Schau mal was var formData=$(form).serialize(); macht. Du kannst eine Datei nicht einfach in einen String umwandeln.

Schau dir mal FormData an: https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects