Invio immagine con Ajax Post

[tipsnow]

salve, la mia applicazione jquery mobile necessita di un caricamento di un'immagine nel db
prima ho implementato il metodo form action indirizzandolo al php dedito all'upload, funzionava perfettamente ma non c'era modo di catturare gli echo di risposta con conferma di avvenuto invio quindi ho implementato il trasferimento con ajax:

<form action="#" method="post" enctype="multipart/form-data">
                    Title: <input type="text" name="title" id="title" />
                    Question Text: <input type="text" name="text" id="text" />
                    <input type="hidden" id="idUtente" name="idUtente" value="">
                    Select image to upload:
                    <input type="file" name="fileToUpload" id="fileToUpload">
                    <input type="submit" value="Upload Image" name="submit" id="submit">
                </form>

$('form').submit(function (e) {
                    e.preventDefault();
                    $.ajax({
                        type: 'post',
                        url: 'http://esempio.altervista.org/esempio.php',
                        data: new FormData(this),
                        dataType: 'text',
                        contentType: false,
                        processData: false,
                        success: function (data) {
                            alert("data");
                            return false;
                        },
                        error: function (xhr, textStatus, errorThrown) { alert(xhr.status + ': ' + errorThrown); alert("errore"); }
                    })
                });

mentre su server questo codice:

<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check !== false) {
        echo "File is an image";
        $uploadOk = 1;
    } else {
        echo "File is not an image.";
        $uploadOk = 0;
    }
}
// Check file size
if ($_FILES["fileToUpload"]["size"] > 500000) {
    echo "Sorry, your file is too large.";
    $uploadOk = 0;
}
// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
    echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
    $uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
    echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
        //qui ho messo la connessione al db e la query insert (che col form action funzionava)
        echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
    } else {
        echo "Sorry, there was an error uploading your file.";
    }
}
?>

con questo codice pero' oltre a farmi aspettare circa 30 secondi dopo aver premuto submit non trasferisce il file nel db ne fa le query dell'insert ma mi restituisce un echo vuoto, come fare?

[mzanella]

Ad occhio la cosa più strana è che la risposta restituita sia vuota, nonostante ci siano echo letteralmente ovunque.

La prima ipotesi da verificare è che non accadano altri errori durante l'elaborazione in PHP, quindi userei error_reporting(E_ALL) all'inizio del codice, in modo da avere qualche informazione in più.
Anche se non è molto elegante, aggiungerei un'ulteriore echo all'inizio dello script, in modo da verificare che almeno quella viene restituita.

Se questo non funziona, controllerei più attentamente cosa succede durante le comunicazioni.

[tipsnow]

il problema deve stare nel lato della richiesta ajax poiche' con un
PHP:
<?php
echo "ciao";
?>
fa la stessa cosa , niente risposta

[mzanella]

Ho provato ad eseguire quel codice, sembra funzionare.
L'unica accortezza in più che ho usato è stata racchiudere la parte in JavaScript all'interno di:

$(function() {
    ...
});

Puoi mostrare una pagina in cui si verifica il problema?

[tipsnow]

se intendi l'html la pagina e' questa

   <!-- Tipcreate -->
        <div data-role="page" id="tipcreate">
            <div data-role="header">
                <a href="#Tips" data-iconpos="notext" data-role="button" data-icon="flat-cross"></a>
                <h1>Ask Something:</h1>
            </div>
            <div data-role="content">
                <form action="#" method="post" enctype="multipart/form-data">
                    Title: <input type="text" name="title" id="title" />
                    Question Text: <input type="text" name="text" id="text" />
                    <input type="hidden" id="idUtente" name="idUtente" value="">
                    Select image to upload:
                    <input type="file" name="fileToUpload" id="fileToUpload">
                    <input type="submit" value="Upload Image" name="submit" id="submit">
                </form>
                <img id="image" style="width:50%;height:50%"/>
            </div>
        </div>

@edit Ho notato che il problema si verifica soltanto quando il type della richiesta e' post, con il php( che mi restituisce solo l'echo ciao )se la richiesta e' get tutto funziona mentre post si verifica il problema

@@edit ok il tipo posso anche mettere post ma se con esso in data metto il mio {new FormData(this)} mi da errore,altrimenti ad esempio { name: "John", time: "2pm" }, funziona tutto