FormData Ajax not posting data in PHP

Question

Hope you can help me with my problem.

The problem is that i put my data in FormData but when i'm calling them in php file using echo there is no values and data existing and gives me error

an undefined variable

But when im using var_dump() or print_r() it show all the values. and also if i var_dump the files for the images it throws me also an error.

Here 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>

Here is my 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);
    }
 }

now in my myurl.php php file

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

We don't actually using third party script like jQuery. We practice native javascript language.

Thank you.

Check there, https://plainjs.com/javascript/ajax/send-ajax-get-and-post-requests-47/ — Andrei Todorut, Dec 25 '17 at 08:59
HTML file input, "datas.append("file_image", fileInputElement.files[0]);" — Bhupesh, Dec 25 '17 at 09:03
@BhupeshKushwaha i also did that already but when im using var_dump the files there is no values, but in post there was a one value which is where the image located temporarily. — kim-dev, Dec 25 '17 at 09:04
@kim-dev read this url : http://unitedwebsoft.in/blog/jqueryajax-file-upload-php/ — Bhupesh, Dec 25 '17 at 09:21

score 0 · Accepted Answer · answered Dec 25 '17 at 09:34

0

You don't have to append the element manually to form data, create FormData from the form itself.

Give your form a name 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 your 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);

answered Dec 25 '17 at 09:34

Junius L

15,881
6
52
96

did you give your form a name? – Junius L Dec 26 '17 at 06:51
i already figure it out. i must put in the window.load function load first so that it will load the name after the window completely loaded – kim-dev Dec 26 '17 at 12:36
but now the problem is that the data i sent i cant get them in specific means if i echo them out undefined variable but when i var_dump them it will show in array – kim-dev Dec 26 '17 at 12:38
similar to this problem https://stackoverflow.com/questions/47974797/formdata-ajax-to-php?noredirect=1#comment82919450_47974797 – kim-dev Dec 26 '17 at 12:39
In your PHP, use `$file = $_FILES['image']; $fileName = $file['name']; $fileTmpName = $file['tmp_name'];` – Junius L Dec 26 '17 at 12:41
I already did that, but the problem is that there was no defined variable when i get them in specific but when i var_dump them it shows all the variables that i sent. – kim-dev Dec 26 '17 at 12:44

FormData Ajax not posting data in PHP

1 Answers1