我以前在WordPress中使用过Ajax，并使其正常工作。然而，事实证明，这种特殊情况（文件上传）很困难。问题似乎是，尽管我在AJAX中设置了操作，但该操作并没有调用php函数formData.append( \'action\', \'uc_user_image\' ); 与PHP中的函数名相同function uc_user_image()

我知道Ajax正在工作，因为我在success: function(data) {} 控制台中没有任何错误。

我的最终目标是允许用户通过其帐户页面动态更改其个人资料图像。我已经阅读了很多教程和SE问题，但似乎无法理解。非常感谢您的反馈。

functions.php

<?php

// includes
include( get_theme_file_path( \'/includes/enqueue.php\' ) );
include( get_theme_file_path( \'/includes/process/profile-picture.php\' ) );

// hooks
add_action( \'wp_enqueue_scripts\', \'include_scripts\' );
add_action( \'wp_ajax_uc_user_image\', \'uc_user_image\' );

更新：我没有包括nopriv操作，因为这应该只对登录用户有效。我也只在登录时进行测试。

enqueue.php

<?php

function include_scripts() {

  $uri              =     get_theme_file_uri();
  $ver              =     UC_DEV_MODE ? time() : false;

wp_register_script( \'ajax-account\', $uri . \'/assets/js/account/userimg-ajax.js\', array(\'jquery\'), $ver, true);
wp_localize_script( \'ajax-account\', \'userimg\', array( \'ajaxurl\' => admin_url( \'admin-ajax.php\', \'relataive\' )));
wp_enqueue_script( \'ajax-account\' );

}

profile-picture.php

<?php

function uc_user_image() {
// I know (assume) this isn\'t firing because I\'ve done some checks like below.
// I\'m omitting the file upload code to focus on calling the function.

  $output = [\'status\'  => \'func_fired\'];
  wp_send_json($output);

}

userimg-ajax.js

jQuery(document).ready(function( $ ) {

  $(\'#user-image-form\').submit(function(e) {
    e.preventDefault();

    var formData = new FormData()
    var file = $(\'#user-image-file\')[0].files[0];
    formData.append( \'action\', \'uc_user_image\' );
    formData.append( \'file\', file );

    $.ajax({
        url: userimg.ajax_url,
        type: \'POST\',
        data: formData,
        processData: false,
        contentType: false,
        success: function(data) {
              if ( data.status == \'func_fired\' ) {
                $(".dev-updates").html(\'Function Fired\');
              } else {
                $(".dev-updates").html(\'Function NOT Fired\');
              }
        }

    });

  });

});

form html

            <form id="user-image-form">

              <label id="user-image-upload">
                 <input type="file" name="user-image-file" id="user-image-file" accept="image/*" />
                 + Upload Picture
              </label>
              <button type="submit" id="user-image-save"/>Save</button>

            </form>

如果您质疑我为什么将输入包装在标签中，那么这是为了设计样式。

// wrapped for brevity
wp_localize_script( \'ajax-account\', \'userimg\', array(
  \'ajaxurl\' => admin_url( \'admin-ajax.php\', \'relataive\' )
));