php - 如何在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'];

Answer 1

确保您的ajax 版本支持它。并且您需要将ajax processData 和contentType 设置为FALSE。Para contentType表示不设置Content-Type HEAD，processData表示不将数据处理成字符串。

试试这个:

$.ajax({
    type: 'POST', 
    url: ajaxurl,
    data: fdata,
    processData : false,
    contentType: false,
    success:function(data) {
        alert('success');
    }
}