WordPress主题开发中使用Ajax异步更新前端用户头像

html代码如下：

<div class="file">
   <span>上传头像</span>
   <input type="file" name="addPic" class="addPic" style="" id="addPic" accept=".jpg, .gif, .png" resetonclick="true" data-nonce="<?php echo $wp_create_nonce; ?>">
</div>
//其中<?php $wp_create_nonce = wp_create_nonce('wpshequ-'.get_current_user_id());?>

js（使用了JS中的FormData）代码如下：

<script type="text/javascript">
  $("#addPic").change(function(e){
    var _this = $(this)
    var nonce = _this.data("nonce")
    var file = e.currentTarget.files[0];
    console.log(file)
    //结合formData实现图片预览
    var sendData=new FormData();
    sendData.append('nonce',nonce);
    sendData.append('action','update_avatar_photo');
    sendData.append('file',file);
    
    $.ajax({
      url: "/wp-admin/admin-ajax.php",
      type: 'POST',
      cache: false,
      data: sendData,
      processData: false,
      contentType: false
    }).done(function(res) {
      if (res.status == 1) {
        layer.msg(res.msg, function(){
 			location.reload();
 		});
        setTimeout(function(){location.reload()},1000)
      }else{
        layer.msg(res.msg, function(){
 			location.reload();
 		});
      }

    }).fail(function(res) {
        layer.msg('网络错误', function(){
 			location.reload();
 		});
    });

  });
</script>
//其中的弹窗提示使用了layer.js

php后端处理代码如下：

// 上传头像avatar_photo
function mx_update_avatar_photo()
{
    header('Content-type:application/json; Charset=utf-8');
    global $current_user;
    $uid = $current_user->ID;
    $nonce   = !empty($_POST['nonce']) ? $_POST['nonce'] : null;
    $file = !empty($_FILES['file']) ? $_FILES['file'] : null;
    if ($nonce && !wp_verify_nonce($nonce, 'wpshequ-' . $uid)) {
        echo json_encode(array('status' => '0', 'msg' => '非法请求'));exit;
    }

    $file_index = mb_strrpos($file["name"],'.'); //扩展名定位
    //图片验证
    $is_img = getimagesize($file["tmp_name"]);
    
    if(!$is_img && true){
        echo json_encode(array('status' => '0', 'msg' => '上传文件类型错误'));exit;
    }
    //图片类型验证
    $image_type = ['image/jpg', 'image/gif', 'image/png', 'image/bmp', 'image/pjpeg', "image/jpeg"];
    if(!in_array($file['type'], $image_type) && true){
        echo json_encode(array('status' => '0', 'msg' => '禁止上传非图片类型文件'));exit;
    }
    //图片后缀验证
    $postfix = ['.png','.jpg','.jpeg','pjpeg','gif','bmp'];
    $file_postfix = strtolower(mb_substr($file["name"], $file_index));
    if(!in_array($file_postfix, $postfix) && true){
        echo json_encode(array('status' => '0', 'msg' => '上传后缀不允许'));exit;
    }
    if ( !empty( $file ) ) {
        // 获取上传目录信息
        $wp_upload_dir = wp_upload_dir();
        // 将上传的图片文件移动到上传目录 md5纯命名图片
        $info = pathinfo($file['name']);
        $ext  = empty($info['extension']) ? '' : '.' . $info['extension'];
        $name = basename($file['name'], $ext);
        $basename = time().'-'.substr(md5($name), 0, 15) . $ext;
        //
        $filename   = $wp_upload_dir['path'] . '/' . $basename;
        $re         = rename( $file['tmp_name'], $filename );
        $attachment = array(
            'guid'           => $wp_upload_dir['url'] . '/' . $basename,
            'post_mime_type' => $file['type'],
            'post_title'     => preg_replace( '/\.[^.]+$/', '', $basename ),
            'post_content'   => '',
            'post_status'    => 'inherit'
        );
        $attach_id  = wp_insert_attachment( $attachment, $filename );
        require_once( ABSPATH . 'wp-admin/includes/image.php' );
        $attach_data = wp_generate_attachment_metadata( $attach_id, $filename );
        wp_update_attachment_metadata( $attach_id, $attach_data );
        if($attach_id){
            update_user_meta($uid, 'wp_user_avatar', $attach_id);
            echo json_encode(array('status' => '1', 'msg' => '上传成功'));exit;
        } else {
            echo json_encode(array('status' => '0', 'msg' => '上传失败'));exit;
        }
    }
    echo json_encode(array('status' => '0', 'msg' => '文件错误'));exit;
}
add_action('wp_ajax_mx_update_avatar_photo', 'mx_update_avatar_photo');
add_action('wp_ajax_nopriv_mx_update_avatar_photo', 'mx_update_avatar_photo');