jQuery Ajax post file

Question

I try to post an uploaded file via ajax to php.

HTML :

<form id="uploadForm" name="uploadForm" action="#" enctype="multipart/form-data"> 
<input id="name" name="name" class="form-control" type="text" />
<input id="csv" name="csv" type="file" />
<input id="CSVUpload" type="submit" class="btn btn-default" name="Submit" value="Hochladen" />

JS

$("#uploadForm").submit(function () {
    var formData = new FormData();
    formData.append( 'csv',  $( '#csv' )[0].files[0] ); 
    formData.append( 'name', $( '#name'));
    jQuery.ajax({
        url: "../lib/import.php",
        data: formData,
        type: "POST",
        success: alert('erfolgreich'),
        error: alert('Fehler'),
        cache: false,
        contentType: false,
        mimeType: 'multipart/form-data',
        processData: false
    });     
});

and then i try to get the form data in PHP:

$_FILES['csv']
$_POST['name']

But the Ajax call completes with success and error... I'm confused... The PHP file will not executed correctly...

Thanks for your help!

Answer 1

You aren't assigning functions to success or error .

You are calling the alert function immediately and then assigning its return value.

You need to create new functions to assign to success and error .

success: function () { alert('erfolgreich') },
error: function () { alert('Fehler') },

---

You are also calling the function as a submit handler, but aren't preventing the normal form submission. Consequently, the browser will load a new page before processing the response to the Ajax request.

$("#uploadForm").submit(function (event) {
    event.preventDefault();

Answer 2

Try restructuring your AJAX call with your success and failure code like this:

$.post('../lib/import.php', formData).done(function() {
    console.log('done');
}).fail(function() {
    console.log('error');
});

See http://api.jquery.com/jquery.post/ for more examples.