FormData Ajax, das Daten in PHP

Question

nicht bekannt gibt Hoffe, dass Sie mir mit meinem Problem helfen können.

Das Problem ist, dass ich meine data in FormData setzen, aber wenn ich sie in PHP-Datei Aufruf mit echo gibt es keine Werte und vorhandene Daten und gibt mir error

ein undefined variable

Aber wenn ich var_dump() oder print_r() verwende, zeige es alle values. und auch wenn ich var_dump die Dateien für die Bilder erstelle ich auch eine error.

Hier in html:

<form id="form" action="myurl.php" method="post" enctype="multipart/form-data" onsubmit="return false"> 
    <input type="file" name="image" accept="image/*"/> 
    <input type="text" name="description"/> 
    <input type="submit" /> 
</form> 

Hier ist mein Code in ajax:

function getName(key) 
{ 
    key = document.getElementsByName(key)[0]; 
    return key; 
} 
function getId(key) 
{ 
    key = document.getElementById(key); 
    return key; 
} 

var url = getId('form').getAttribute('action'); 
var datas = new FormData(); 
var xhr = new XMLHttpRequest(); 

var image = getName('image').value.trim(); 
var description = getName('description').value.trim(); 

datas.append('file_image', image.files[0]); 
datas.append('description', description); 

xhr.open('POST', url, true); 
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
xhr.send(datas); 

xhr.onreadystatechange = function() 
{ 
    var OK = 4; 
    var DONE = 200; 

    if(xhr.readyState == 4 && xhr.status == DONE) 
    { 
     alert(xhr.responseText); 
    } 
} 

jetzt in meiner myurl.php PHP-Datei

var_dump($_POST); 
var_dump($_FILES); 

Wir nicht wirklich Dritte mit script wie jQuery. Wir üben native javascript Sprache.

Vielen Dank.

Answer 1

Sie müssen das Element nicht manuell anfügen, um Daten zu erstellen, sondern um FormData aus dem Formular selbst zu erstellen.

Geben Sie Ihr Formular einen Namen name="upload-image

<form id="form" action="myurl.php" name="upload-image" method="post" enctype="multipart/form-data"> 
    <input type="file" name="image" accept="image/*"/> 
    <input type="text" name="description"/> 
    <input type="submit" /> 
</form> 

In Ihrem Javascript

var form = document.forms.namedItem("upload-image"); 
var url = form['action']; 
form.addEventListener('submit', function(ev) { 

    var oData = new FormData(form); 

    var oReq = new XMLHttpRequest(); 
    oReq.open("POST", url, true); 
    oReq.onload = function(oEvent) { 
     if (oReq.status == 200) { 
      alert(oReq.responseText); 
     } else { 
      alert(oReq.status + " occurred when trying to upload your file."); 
     } 
    }; 

    oReq.send(oData); 
    ev.preventDefault(); 
}, false);