Submitting form via Ajax - FormData always empty

Question

I need to upload a photo on a server using ajax. I have set up the form the javascript as well, but the FormData object is always empty! I have tried various ways to reference the actual form, but still not working.

fiddle example: https://jsfiddle.net/cjngvg8a/

Thanks!

html:

<form id="profileImageForm" action="update.php" method="post" enctype="multipart/form-data">
<input type="text" value="hello" name="test" />
<input type="file" name="profile_pic" id="image_upload"/>
<input type="submit" value="Save"/>
</form>

js:

$('#profileImageForm').on('submit',(function(e) {
    e.preventDefault();     
    var formData = new FormData(this);

    console.log(formData);

    $.ajax({
        type:'POST',
        url: $(this).attr('action'),
        data:formData,
        cache:false,
        contentType: false,
        processData: false,
        success:function(data){
            console.log("success");
            console.log(data);
        }
    });
}));

score 29 · Accepted Answer · answered Nov 01 '15 at 10:45

29

The data in a FormData object is not revealed by inspecting it with console.log(). It is there, you just can't see it.

If you examine the Net tab of your developer tools, you can see the form content is being uploaded.

answered Nov 01 '15 at 10:45

Quentin

914,110
126
1,211
1,335

22

You can use `Array.from(formData)` to see the values with a `console.log` – soywod Feb 02 '19 at 13:54
Do you have any idea why it isn't available in the console? Even `formData.entries` shows a length of 0. – pbarney Jun 23 '20 at 20:41

Submitting form via Ajax - FormData always empty

1 Answers1