javascript - 通过 jQuery 将图片发送到 PHP - FormData 每次都是空的

Question

我读了一些 SO 问题，但没有任何帮助。

我有一个普通的 HTML 表单:

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

这是我的 jQuery 函数:

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

这个 var test = new FormData(this); 每次都是空的。

我尝试了 this 和表单的 jQuery 选择器。两者都不起作用。

编辑:

控制台错误:

Uncaught TypeError: Illegal invocation

编辑:

这是我调试的图片:

Answer 1

尝试以下代码:

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

发送表单

使用 jQuery 的 Ajax 请求将如下所示:

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