FormularData-Objekt funktioniert nicht mit Jquery AJAX Post?

Question

lässt Sprung direkt in den Code:

var formData = new FormData(); 

formData.append('name', dogName); 
formData.append('weight', dogWeight); 
formData.append('activity', dogActivity); 
formData.append('age', dogAge); 
formData.append('file', document.getElementById("dogImg").files[0]); 
console.log(formData); 

Hier habe ich ein paar Strings am anhängt und ein Datei-Objekt zu dem Objekt Formdata, um die Informationen alle asynchron an den Server zu senden.

Gleich danach Ich habe diese jquery Ajax-Request:

$.ajax({ 
    type: "POST", 
    url: "/foodoo/index.php?method=insertNewDog", 
    data: formData, 
    processData: false, 
    contentType: false, 
    success: function(response){ 
    console.log(response); 
    }, 
    error: function(){ 
    } 
}); 

Also hier Ich versuche, die Informationen an den Server, auf dem Server PHP-Datei POST ich eine einfache print_r des POST haben, damit ich sehen was durchkommt und was nicht.

Leider ist meine Antwort in der console.log (Daten) leer.

Auch wenn Sie die Header in der Registerkarte Netzwerk überprüfen Sie die folgende leere Ausgabe:

Erfolgsfunktion (nur zur Verdeutlichung) aufgerufen wird

Answer 1

Wenn Sie eine Ajax sind zu senden Anfrage über jQuery und Sie möchten FormData senden, müssen Sie nicht JSON.stringify auf diesem FormData verwenden. Auch wenn Sie Datei der Inhaltstyp sind zu senden müssen multipart/form-data einschließlich boundry - so etwas wie dieses multipart/form-data; boundary=----WebKitFormBoundary0BPm0koKA

So Formdata einschließlich einiger Datei über jQuery Ajax senden Sie benötigen:

• Set data auf die Formdata ohne irgendwelche Änderungen.
• Setzen Sie processData auf false (Damit verhindern Sie, dass jQuery die Daten automatisch in eine Abfragezeichenfolge konvertiert).
• Setzen Sie die contentType auf false (Dies wird benötigt, da jQuery sonst falsch eingestellt wird).

Ihre Anfrage sollte wie folgt aussehen:

var formData = new FormData(); 

formData.append('name', dogName); 
// ... 
formData.append('file', document.getElementById("dogImg").files[0]); 


$.ajax({ 
    type: "POST", 
    url: "/foodoo/index.php?method=insertNewDog", 
    data: formData, 
    processData: false, 
    contentType: false, 
    success: function(response) { 
     console.log(response); 
    }, 
    error: function(errResponse) { 
     console.log(errResponse); 
    } 
}); 

Answer 2

, wenn Sie genau, wie durchlässig anwswer tat und immer noch nicht tun sie nicht its working

vielleicht intelligence and quick wath Sorge erzählen Sie seine not working

Sorge

aber nicht, schauen Sie sich network tap

seine Arbeit

Hoffnung dies spart Zeit

Answer 3

//For those who use plain javascript 

var form = document.getElementById('registration-form'); //id of form 
var formdata = new FormData(form); 
var xhr = new XMLHttpRequest(); 
xhr.open('POST','form.php',true); 
// xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
//if you have included the setRequestHeader remove that line as you need the 
// multipart/form-data as content type. 
xhr.onload = function(){ 
console.log(xhr.responseText); 
} 
xhr.send(formdata);