Empty $_FILES while AJAX Uploading

Question

I Have got the Following Problem: I'm trying to Upload a File via a Form over Ajax

Here is the HTML File:

<html>
<header>
    <link rel="stylesheet" href="useme.css"/>
    <script src="jq.js"></script>
    <script src="actions.js"></script>
</header>
<body>
<form enctype="multipart/form-data">
    <input type="hidden" name="MAX_FILE_SIZE" value="30000000" />
    <input type="file" id="file" name="file"/>
    <input type="button" value="Click" id="submitBtn"/>
</form>    
<span class="status">no status</span>
</body>

The JavaScript File:

   /**
     * Created by Kenny on 12.04.2015.
     */
$(document).ready(function(){
$("#submitBtn").click(function(){
    var filename = $("#file").serialize();
    $.ajax({
        processData: false,  // tell jQuery not to process the data
        contentType: false, // tell jQuery not to set contentType
        url: "upload.php",
        enctype: 'multipart/form-data',
        data : {
            file: filename
        },
        type : "POST",
        success: function(data){
            if(data != "fail")
            $(".status").html("Upload is availible at: " + data);
            else
            $(".status").html("Upload failed.");           
         }

    });
    });
});

And last but not lately the PHP File that does the Magic (Not really atm)

<?php
/**
 * Created by PhpStorm.
 * User: Kenny
 * Date: 12.04.2015
 * Time: 23:55
 */
$uploaddir = '/many/upload/' . uniqid() . '/';

    if(!file_exists($uploaddir)){
    mkdir($uploaddir, 0777, true);
}
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
    echo "http://use.hints.me/" . $uploaddir;
    file_put_contents($uploaddir . "/index.php", "<?php Header('Location: " . basename($_FILES['userfile']['name']) . "'); ?>");
} else {
    echo "fail";
}
?>

My Problem here is that I only get empty $_FILES in the PHP-File, the PHP File somehow works fine when i use a Standard POST form, but with Ajax it doesnt work at all.

Excuse my messy Code, it's just a Proof of Concept to a friend of mine and not at all used for Providing a serious File Upload site. I just want to get this working.

Things i checked here before:

check the php.ini File if the File Upload is enabled

added enctype="multipart/form-data" to the Form

added the MAX_FILE_SIZE tag to the Form

checked StackOverFlow all over

you are using userfile when the name of the field is file... $_FILES['file'] — insanityCode, Apr 12 '15 at 22:30
See http://stackoverflow.com/questions/28207106/pdf-file-upload-ajax-html/ — guest271314, Apr 12 '15 at 23:07
http://stackoverflow.com/questions/25013968/jquery-dynamic-form-and-the-php-files-empty — Faiyaz Alam, Apr 18 '15 at 07:23

Empty $_FILES while AJAX Uploading

0 Answers0