Upload immagine con ajax post

[batikus]

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.sito.com/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?

 

[criric]

Ciao, io l'ho provato senza modificare niente e funziona egregiamente, togli gli apici nell'alert se vuoi vedere la variabile data. Il file viene trasferito nella cartella uploads che devi creare non nel db e non vedo query nel codice che hai postato.

 

[batikus]

Ciao, io l'ho provato senza modificare niente e funziona egregiamente, togli gli apici nell'alert se vuoi vedere la variabile data. Il file viene trasferito nella cartella uploads che devi creare non nel db e non vedo query nel codice che hai postato.

ho provato a togliere le query , con il solo codice che ho messo qui e che a te funziona a me non carica il file ne restituisce alcun echo ... , ho provato a mettere nel php anche soltanto un codice di 4 righe che riceve il file ma anch'esso non mi funziona

@edit anche mettendo un echo all'inizio del codice php, prima che faccia qualunque altra cosa non mi restituisce neppure quello...

@@edit il problema deve stare nel lato della richiesta ajax poiche' con un

<?php
echo "ciao";
?>

fa la stessa cosa

 

[criric]

anzi una modifica l'ho fatta : ho racchiuso la funzione in document.ready in alternativa devi inserire lo script dopo il form

$(document).ready(function () {
                $('form').submit(function (e) {
                    e.preventDefault();
                    $.ajax({
                        type: 'post',
                        url: '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");
                        }
                    })
                });
            });

 

[batikus]

anzi una modifica l'ho fatta : ho racchiuso la funzione in document.ready in alternativa devi inserire lo script dopo il form

$(document).ready(function () {
                $('form').submit(function (e) {
                    e.preventDefault();
                    $.ajax({
                        type: 'post',
                        url: '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");
                        }
                    })
                });
            });

da quel che ho letto su jquery mobile non va usato il document.ready comunque io l'ho provato e sempre niente risposta, mettendo tutto in $(function () {}); uguale...

@edit la richiesta che fa e' questa

1. 1. Request URL:
      http://localhost:4400/ripple/xhr_proxy?tinyhippos_apikey=ABC&tinyhippos_rurl=http://esempio.altervista.org/esempio.php
   2. Request Method:
      POST
   3. Status Code:
      200 OK
   4. Remote Address:
      [::1]:4400
2. Response Headersview source
   1. Access-Control-Allow-Credentials:
      true
   2. Access-Control-Allow-Methods:
      HEAD, GET, POST, PUT, DELETE, OPTIONS, TRACE, CONNECT, PATCH
   3. Access-Control-Allow-Origin:
      http://localhost:4400
   4. connection:
      close
   5. content-type:
      application/x-httpd-php
   6. date:
      Tue, 21 Jun 2016 12:55:59 GMT
   7. server:
      Apache
   8. transfer-encoding:
      chunked
   9. X-Powered-By:
      Express
3. Request Headersview source
   1. Accept:
      text/plain, */*; q=0.01
   2. Accept-Encoding:
      gzip, deflate
   3. Accept-Language:
      it-IT,it;q=0.8,en-US;q=0.6,en;q=0.4
   4. Connection:
      keep-alive
   5. Content-Length:
      14612
   6. Content-Type:
      multipart/form-data; boundary=----WebKitFormBoundaryD4l1X804WDfXaaOh
   7. Host:
      localhost:4400
   8. Origin:
      http://localhost:4400
   9. Referer:
      http://localhost:4400/index.html
   10. User-Agent:
       Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
   11. X-Ripple-User-Agent:
       Mozilla/5.0 (Linux; U; Android 2.3.2; en-us; Nexus S Build/GRH78C) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
4. Query String Parametersview sourceview URL encoded
   1. tinyhippos_apikey:
      ABC
   2. tinyhippos_rurl:
      http://esempio.altervista.org/esempio.php
5. Request Payload
   1. ------WebKitFormBoundaryD4l1X804WDfXaaOh Content-Disposition: form-data; name="title" Asd ------WebKitFormBoundaryD4l1X804WDfXaaOh Content-Disposition: form-data; name="text" asd ------WebKitFormBoundaryD4l1X804WDfXaaOh Content-Disposition: form-data; name="idUtente" 2 ------WebKitFormBoundaryD4l1X804WDfXaaOh Content-Disposition: form-data; name="fileToUpload"; filename="51N7Q2rLjSL._AA160_.jpg" Content-Type: image/jpeg ------WebKitFormBoundaryD4l1X804WDfXaaOh Content-Disposition: form-data; name="submit" Upload Image ------WebKitFormBoundaryD4l1X804WDfXaaOh--
      
      
      
   @edit ho scoperto che il problema c'e' soltanto quando nella richiesta ajax type POST metto come data il FormData, se al suo post metto ad es. {nome:"Flavio"} funziona pero' nel php non riesco a prendere il valore di nome con $_POST("nome")

 

[Marcello.Fiore]

Anche io mi sto cimentando in questo problema... praticamente ho una funzione AJAX che mi passa i dati in POST ad una pagina php, solo che quando dalla pagina php richiamo con $_FILES["nome"]["name"] non funziona.. mi da errore sulla linea... se invece è un campo testo tutto va bene.. mi potete aiutare?

QUESTA LA PARTE HTML

form name="immagine" onsubmit="AjaxCall('immagine', 'POST', 'upload.php', 'msg'); return false;" enctype="multipart/form-data">
        Immagine da caricare:
        <input type="file" name="foto">
        <input type="submit" value="SALVA">
    </form>

PARTE PHP PER INIZIARE

<?php
$foto_nome = $_FILES["foto"]["name"];
echo $foto_nome;
?>

AJAX funzioni passaggio parametri in GET E POST

/*
    Funzione AJAX per le chiamate in GET e POST
    Autore: Luca Ruggiero
    Fonte: Corso AJAX di MRW Corsi 
*/
function ManageOutput(MyElement, MyHTML)
{
    document.getElementById(MyElement).innerHTML = MyHTML;
    var MyRegExp = /<script\b[\s\S]*?>([\s\S]*?)<\//ig;
    var MyMatch;
    while (MyMatch = MyRegExp.exec(MyHTML))
    {
        eval(MyMatch[1]);
    }
}
function AjaxCall(AjaxForm, AjaxMethod, AjaxFile, AjaxHtml)
{
    var AjaxObject, AjaxText;
    AjaxText = document.getElementById(AjaxHtml);
    try
    {
        window.XMLHttpRequest ? AjaxObject = new XMLHttpRequest() : AjaxObject = new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (e)
    {
         AjaxText.innerHTML = "AJAX non funziona sul tuo browser";
    }
    AjaxObject.onreadystatechange = function()
    {
        if (AjaxObject.readyState == 4)
        {
            AjaxObject.status == 200 ? ManageOutput(AjaxHtml, AjaxObject.responseText) : AjaxText.innerHTML = "Si è verificato un errore nel tentativo di usare AJAX";
            document.body.style.cursor = "default";
        }
        else
        {
            document.body.style.cursor = "wait";
        }
    }
    AjaxObject.open(AjaxMethod, AjaxFile, true);
    if (AjaxMethod == "GET")
    {
        AjaxObject.send();
    }
    else
    {
        var AjaxCount = 0;
        var AjaxString = "";
        var AjaxForms = document.forms[AjaxForm];
        var AjaxElements = AjaxForms.elements.length;
        for (AjaxCount=0; AjaxCount<AjaxElements; AjaxCount++)
        {
            var AjaxType = AjaxForms.elements[AjaxCount].type.toLowerCase();
            if (AjaxType != "button" && AjaxType != "submit" && AjaxType != "image" && AjaxType != "reset")
            {
                if (AjaxType == "radio" || AjaxType == "checkbox")
                {
                    if (!AjaxForms.elements[AjaxCount].checked)
                    {
                        AjaxString += AjaxForms.elements[AjaxCount].value;
                    }
                }
                AjaxString += AjaxForms.elements[AjaxCount].name + "=" + encodeURIComponent(AjaxForms.elements[AjaxCount].value);
                if (AjaxCount < AjaxElements) AjaxString += "&";
            }
        }
        AjaxObject.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        AjaxObject.setRequestHeader("Content-length", AjaxString.length);
        AjaxObject.setRequestHeader("connection", "close");
        AjaxObject.send(AjaxString);
    }
}