Var dump formdata as POST returns NULL

Question

I saw some simple code for using formdata for uploading images over ajax but on php side it is showing up NULL inside $_POST, I tried to echo $_POST['file']['name'] but it echos nothing...

My php file has:

var_dump($_POST);

How can I use formData sent by ajax to php (in php)?

$(document).on('change','#image',function(){
    var fd = new FormData();    
        fd.append( 'file', $(this).prop("files")[0]);
       console.log(fd);
    $.ajax({
        type: 'post',
        processData: false,
        contentType: false,
        url: './images.php',
        data: fd,
        success: function(a){
            console.log(a);
        }
    });
 });

#image{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<label for="image"><i class="fa fa-camera" aria-hidden="true"></i></label><input  type="file" name="file" id="image">

@madalinivascu this answer has both and i tried both but result was the same: https://stackoverflow.com/questions/17834243/how-to-read-formdata-object-in-php — , Nov 07 '17 at 11:58
@B001 https://stackoverflow.com/questions/19617996/file-upload-without-form — , Nov 07 '17 at 11:59
@StupidKid do you know how ajax works?how are you seeing the output of the ajax? — madalinivascu, Nov 07 '17 at 12:00

score 1 · Accepted Answer · answered Nov 07 '17 at 11:58

1

You have to use the superglobal $_FILES instead of $_POST try:

var_dump($_FILES);

Output something like:

 array (size=1)  'file' =>
      array (size=5)
            'name' => string '49e9c80947764261bbd9d46a8063c3d1.jpg' (length=36)      
            'type' => string 'image/jpeg' (length=10)
            'tmp_name' => string 'C:\xampp\tmp\php64A9.tmp' (length=24)      
            'error' => int 0
            'size' => int 3090

answered Nov 07 '17 at 11:58

mega6382

9,211
17
48
69

Tried that too and got same result :/ – Nov 07 '17 at 12:00
@StupidKid I used your code, to check this and it worked. How are you checking if the `$_POST` or `$_FILES` is empty or not? – mega6382 Nov 07 '17 at 12:01
Use the [`Network`](https://i.stack.imgur.com/SefEQ.png) tab of the dev tools, to make sure. – mega6382 Nov 07 '17 at 12:02
Well this may be my bad but I used var_dump() and with ajax success it returns NULL in console.log or when I try to echo something and return it as text in ajax success it returns empty. – Nov 07 '17 at 12:07
Now for some reason for both POST and FILES it returns array but after 60s whys that? – Nov 07 '17 at 12:08
@StupidKid It might be due to file size, I suppose, uploading time. – mega6382 Nov 07 '17 at 12:09
1

Oh I didn't think about that, hmm I accepted your answer although I tried that but it didnt worked and now it does :D – Nov 07 '17 at 12:15

score 0 · Answer 2 · answered Nov 07 '17 at 12:14

This worked for me.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<form id="imageUpload">
    <label for="image"><i class="fa fa-camera" aria-hidden="true"></i></label><input  type="file" name="file" id="image">
</form>
<script type="text/javascript">
    $(document).on('change','#image',function(){

    var fd = new FormData($("#imageUpload")[0]);
        fd.append('file',$(this)[0].files[0]);

       console.log(fd);
    $.ajax({
        type: 'post',
        processData: false,
        contentType: false,
        url: 'testimage.php',//change to yours
        data: fd,
        success: function(a){
            console.log(a);
        }
    });
    });

</script>

Then my php

<?php

    var_dump($_FILES);

Results :

Var dump formdata as POST returns NULL

2 Answers2