如何通过wordpress中的jQuery/Ajax上传图像

Question

我正在尝试从wordpress注册表单(自定义表单)上传图像.我找到了许多通过ajax上传的方法,但没有一种方法可以帮助我.

这是没有标签的表格

<div class="lofin-form"><div class="row">                       
<input type="text" name="first_name" id="first_name" placeholder="First Name" class="input" value="" size="20" />
</div>
<div class="row"> 
<lable>Id proof <input type="file" name="id_proof"  id="id_proof" class="input" />
</div>
<p class="submit"><input type="submit" name="wp-submit" id="wp-submit-register" class="btn vernil small" value="'.__('Sign Up','wpestate').'" /></p>
</div>

这是jQuery脚本代码

$('#wp-submit-register').click(function(){
  wpestate_register();
});

function wpestate_register (){
var  user_role =  $('#first_name').val();
var fdata = new FormData();
fdata.append('file', $('#id_proof')[0].files[0]);
$.ajax({
    type: 'POST', 
    url: ajaxurl,
    data: {
        'action' :   'ajax_free_register_form',
        'first_name'  :   first_name,
        'file_data'   : fdata

    },
    success:function(data) {
        alert('success');
    }
}

这是PHP功能

add_action( 'wp_ajax_nopriv_ajax_free_register_form', 'ajax_free_register_form' );  
add_action( 'wp_ajax_ajax_free_register_form', 'ajax_free_register_form' );  

function ajax_free_register_form(){
   $first_name  =   trim( $_POST['first_name'] ) ;
   $id_proof   =   $_FILES['id_proof'] ; 
}

解决[编辑]

只需在表单中添加表单标记并提供ID"user_reg_form"即可.

<form id="user_reg_form" action="" method="post" enctype="multipart/form-data">
----------------------input fields goes here-------------------
</form>

并更新脚本:

$('#wp-submit-register').click(function(){
   wpestate_register();
});

function wpestate_register (){
var formdata = new FormData( $("#user_reg_form")[0] );
formdata.append('action', 'ajax_free_register_form');
$.ajax({
   type: 'POST', 
   cache: false,
   contentType: false,
   processData: false,
   url: ajaxurl,
   data: formdata,
   success:function(data) {
      alert('success');
   }
});
}

之后,您可以简单地获取上传的文件

$attachment = $_FILES['id_proof'];