send a picture via jQuery to PHP - FormData is everytime empty

Question

I read some SO questions but nothing could help me.

I've a normal HTML form:

<form id="featured_upload" method="post" action="#" enctype="multipart/form-data">
  <input type="file" name="my_image_upload" id="my_image_upload" multiple="false" />
  <input type="hidden" name="post_id" id="post_id" value="<?php echo get_the_ID(); ?>" />
  <?php wp_nonce_field( 'my_image_upload', 'my_image_upload_nonce' ); ?>
  <div class="button-reg-box">
    <button type="submit" class="btn btn-primary btn-set-picture">Profilbild bearbeiten</button>
  </div>
</form>

This is my jQuery function:

jQuery('#featured_upload').submit(function (e) {
    e.preventDefault();
    SetAndChangePicture();
});

function SetAndChangePicture() {
    var test = new FormData(this); <-- empty :(
    console.log(test);
    jQuery.ajax({
        type: "POST",
        async: false,
        url: dmd_output_favorites_obj.ajax_url,
        data: {
            action: "dmd_picture",
            formdata: new FormData() <-- empty too but I want to test above
        },
        success: function (data) {
            //jQuery('#MemberAreaChangeInterests .alert-success').show();
        }
    });
}

This var test = new FormData(this); is everytime empty.

I tried this and the jQuery selector of the form. Both aren't working.

EDIT:

Error in console:

Uncaught TypeError: Illegal invocation

EDIT:

Here is a picture of my debug:

Divyesh Kanzariya · Accepted Answer · 2016-11-17 08:05:46Z

1

Try Following code :

var formData = new FormData();
formData.append('image', $('input[type=file]')[0].files[0]);

Sending form

Ajax request with jQuery will looks like this:

$.ajax({
    url: 'Your url here',
    data: formData,
    type: 'POST',
    contentType: false,
    processData: false,
    //...Other options like success and etc
})

answered Nov 17, 2016 at 8:05

Divyesh Kanzariya

3,8093 gold badges48 silver badges47 bronze badges

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

2 Comments

cgee Over a year ago

I debug the var formData but this var is still empty.

Divyesh Kanzariya Over a year ago

@cgee should try remove SetAndChangePicture paste code there

S Vinesh · Accepted Answer · 2016-11-17 07:56:43Z

0

Try this

var formData = $('#featured_upload').serialize();

This will give you the form details

edited Nov 17, 2016 at 7:56

answered Nov 17, 2016 at 7:50

S Vinesh

5391 gold badge5 silver badges15 bronze badges

1 Comment

cgee Over a year ago

It is still empty.

madalinivascu · Accepted Answer · 2016-11-17 08:07:24Z

0

Try the following:

add a input type hidden with the action

<input type="hidden" name="action" id="post_id" value="dmd_picture" />

change data to:

 data: new FormData(jQuery('#featured_upload')[0]);

use the following ajax properties

 contentType: false,
 processData: false,

Note: don't use async:false;

edited Nov 17, 2016 at 8:07

answered Nov 17, 2016 at 7:53

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

5 Comments

cgee Over a year ago

Still empty and this new error appears. Uncaught TypeError: k.toLowerCase is not a function

S Vinesh Over a year ago

FormData does not accepts argument right ? developer.mozilla.org/en-US/docs/Web/API/FormData

madalinivascu Over a year ago

what is empty? how do you know is empty?

cgee Over a year ago

I debugging with firebug... it is empty. $_FILE in PHP is also empty.

madalinivascu Over a year ago

can you provide the php function for this ajax reuqest?

Collectives™ on Stack Overflow

send a picture via jQuery to PHP - FormData is everytime empty

3 Answers 3

2 Comments

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related