Upload immagine con ajax post

batikus

Nuovo Utente
20 Giu 2016
4
0
1
23
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:

HTML:
<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>
Codice:
$('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:
<?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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

Nuovo Utente
20 Giu 2016
4
0
1
23
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:
<?php
echo "ciao";
?>
fa la stessa cosa
 
Ultima modifica:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
anzi una modifica l'ho fatta : ho racchiuso la funzione in document.ready in alternativa devi inserire lo script dopo il form
Codice:
$(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

Nuovo Utente
20 Giu 2016
4
0
1
23
anzi una modifica l'ho fatta : ho racchiuso la funzione in document.ready in alternativa devi inserire lo script dopo il form
Codice:
$(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. 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
  1. 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
  2. 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
  3. Query String Parametersview sourceview URL encoded
    1. tinyhippos_apikey:
      ABC
    2. tinyhippos_rurl:
      http://esempio.altervista.org/esempio.php
  4. 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")
 
Ultima modifica:

Marcello.Fiore

Nuovo Utente
14 Giu 2016
10
1
3
32
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
Codice:
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
Codice:
<?php
$foto_nome = $_FILES["foto"]["name"];
echo $foto_nome;
?>
AJAX funzioni passaggio parametri in GET E POST
Codice:
/*
    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);
    }
}
 
Discussioni simili
Autore Titolo Forum Risposte Data
C [PHP] Upload immagine in un form con target _blank: non funziona PHP 7
F [Risolto] upload immagini con la classe di Baol74 con size immagine Classic ASP 15
L Upload di un'immagine all'interno di un database usando php PHP 6
jailbait [PHP] Upload immagine e stampa a schermo PHP 0
G PHP upload dati ed immagine PHP 7
Marcello.Fiore UPLOAD IMMAGINE AJAX Ajax 1
MarcoGrazia Come si carica un'immagine in upload? PHP 1
L Upload immagine e update dati DB PHP 2
M Rinominare filename immagine prima di fare l'upload PHP 2
xone Rinominare immagine upload PHP 6
K Upload immagine su server remoto Sviluppo app per Android 1
IImanuII Modificare immagine in evidenza in upload. WordPress 0
L [php] upload controllo dimensione immagine PHP 8
A Immagine ricaricata dopo il refresh (upload) PHP 2
A Upload immagine PHP 4
A Upload immagine profilo utente PHP 4
F resize di un'immagine dopo l'upload. PHP 0
K [PHP] multi upload immagine da form PHP 60
C ridurre dimensione file immagine prima dell'upload Javascript 0
L Passare ad uno script PHP i dati di un form incluso l'upload di un'immagine Ajax 0
giancadeejay upload immagine profilo utente PHP 3
giancadeejay upload immagine su profilo utente PHP 0
P Risuscito un vecchio script di upload immagine multiplo PHP 10
P [JSP] Upload Immagine Java 0
helpdesk Problema Upload non ridimensiona l'immagine PHP 4
S upload immagine multiple da inserire PHP 8
G inserire watermark su immagine in upload PHP 2
Y problema nell'upload di un'immagine PHP 7
J upload immagine PHP 0
S Problema upload immagine Classic ASP 4
M aiuto upload testo e immagine Classic ASP 1
A asp upload immagine Classic ASP 2
R upload e ridimensionamento immagine non funzionante PHP 0
Z Upload protetto e sicuro PHP 1
L Modifica file upload in ASP Classic ASP 2
Cosina Creare bottone delete in form upload PHP 5
Cosina Creare bottone delete in form upload PHP 1
Cosina Upload multiplo con invio allegati per email PHP 0
Cosina Upload multiplo con archiviazione in cartella PHP 16
P Script upload immagini jQuery 0
L upload image tramite url e cache PHP 10
W Non fa l'upload PHP 0
S Upload file senza doverlo selezionare PHP 2
P Upload foto cover e profilo jQuery 0
G Upload file error Apache 0
R Modifica codice per l'upload di più file PHP 0
S [PHP] Upload stesso file PHP 14
max1974 [Javascript] dropzone upload to server Javascript 0
S [ASP.Net] [ASP] Upload Image ASP.NET 6
F [PHP] Informazioni upload PHP 11

Discussioni simili