à l'aide de html5 pour l'upload de fichier avec l'ajax et jquery

Donc je suis en train d'essayer de télécharger une image avec les données du formulaire au serveur. Je suis en utilisant FileReader API pour convertir une image aux données et de les télécharger vers le serveur. Je suis en suivant le code similaire à HTML5 uploader à l'aide d'AJAX Jquery.

Les données sont converties en jquery, mais rien n'est envoyé au serveur et il n'y a pas d'erreur généré.

$('#formupload').on('submit', function(e){
    e.preventDefault();
    var hasError = false;
    var file = document.getElementById('file').files[0];
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = shipOff;

    function shipOff(event) {
        result = new Image(); 
        result.src = event.target.result;
        var fileName = document.getElementById('file').files[0].name; 
        $.post('test.php', { data: result, name: fileName });
    }

Code PHP

<?php
$data = $_POST['data'];
$fileName = $_POST['name'];
echo $fileName;
$fp = fopen('/uploads/'.$fileName,'w'); //Prepends timestamp to prevent overwriting
fwrite($fp, $data);
fclose($fp);
$returnData = array( "serverFile" => $fileName );
echo json_encode($returnData);
?>

Le problème est dû à de gros fichier image ou FileReader API?

OriginalL'auteur de-bugged | 2013-01-22