[PHP] Bild in Ajax Fomular kann nicht ausgelesen werden


Hallo zusammen,
ich habe das Ajax Forular script von html-seminar genommen und es funtioniert bis jetzt wunderbar , außer ich möchte ein bild mit übergeben , darauf kann ich nicht zugreifen.
Mein Formular :

HTML:
<form method="POST" id="sites" action="<?= ROOT; ?>admin/includes/sitesAjax.php">
<section class="panel editer-1" id="panel">
<h2>Neue Seite erstellen</h2>
    <label for="title">Wie wollen sie ihren Beitrag nennen?</label>
    <input type="text" id="title" name="site_name">
    <label for="teaser">Was soll den Leser anreizen?</label>
    <textarea type="text" id="teaser" name="site_teaser"></textarea>
    <label for="content">Was ist ihr Text?</label>
    <textarea type="text" id="content" name="site_content" rows="15"></textarea>
    <label for="tags">Tags ?</label>
    <input type="text" id="tags" name="site_tags">
    <label for="image">Bild ?</label>
    <input type="file" id="fileUploader" name="site_image">
    <button class="btn info" type="submit">Erstellen</button>
</section>
</form>
Ajax Script:
Javascript:
$("#sites").submit(function(event) {
    // Das eigentliche Absenden verhindern
    event.preventDefault();
    // Das sendende Formular und die Metadaten bestimmen
    var form = $("#sites"); // Dieser Zeiger $(this) oder $("form"), falls die ID form im HTML exisitiert, klappt übrigens auch ohne jQuery ;)
    var action = form.attr("action"), // attr() kann enweder den aktuellen Inhalt des gennanten Attributs auslesen, oder setzt ein neuen Wert, falls ein zweiter Parameter gegeben ist
        method = form.attr("method"),
        data   = form.serialize(); // baut die Daten zu einem String nach dem Muster vorname=max&nachname=Müller&alter=42 ... zusammen
    // Der eigentliche AJAX Aufruf
    $.ajax({
        url : action,
        type : method,
        data : data
    }).done(function (data) {
        // Bei Erfolg
        alert(data);
        // Bei Fehler
        show("Fehler beim erstellen der Seite!");
    }).always(function() {
        // Immer
        show("Beendet!");
    });
});
PHP Datei :
PHP:
<?php
namespace classes\libs;
session_start();
include("../../autoload.php");
#set_include_path("/../app/"); # Standard Include Ordner
include("../../app/lib/helper/config.php");
include("../../app/lib/helper/system.php");
include("../classes/libs/Input.php");

print_r($_FILES);
if (Input::exists("files")) {
    echo \json_encode(Input::get("site_image"));
    #$site->createSite();
    #echo $_SERVER['REQUEST_URI'];
    echo "hallo";
  }
?>
Hat einer eine Idee?
 

Sempervivum

Erfahrenes Mitglied
Die Erklärung findet man in der Beschreibung von serialize:
https://api.jquery.com/serialize/
Data from file select elements is not serialized.
D. h. so kann es nicht funktionieren.
Es gibt jedoch eine vorgefertigte Bibliothek, die das Abschicken eines Formulars über Ajax einschl. Fileupload unterstützt:
https://github.com/jquery-form/form
The Form Plugin supports use of XMLHttpRequest Level 2 and FormData objects on browsers that support these features. As of today (March 2012) that includes Chrome, Safari, and Firefox. On these browsers (and future Opera and IE10) files uploads will occur seamlessly through the XHR object and progress updates are available as the upload proceeds. For older browsers, a fallback technology is used which involves iframes.