Submitting form via Ajax - FormData always empty [duplicate]

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);
        }
    });
}));

Quentin · Accepted Answer · 2015-11-01 10:45:24Z

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 1, 2015 at 10:45

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

soywod Over a year ago

You can use Array.from(formData) to see the values with a console.log

pbarney Over a year ago

Do you have any idea why it isn't available in the console? Even formData.entries shows a length of 0.

Collectives™ on Stack Overflow

Submitting form via Ajax - FormData always empty [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related