非POST/GET方式Ajax获变量值及.blur触发PHP加载问题

让我一步步帮你解决这两个技术需求，先梳理代码里的问题，再给出完整的修正方案：

需求1：不使用POST/GET方法通过Ajax获取变量值 #

Ajax本质是基于HTTP协议的请求，GET/POST是最常用的方法，但如果你希望用非GET/POST的HTTP方法（比如PUT、HEAD）来获取变量，我们可以通过指定Ajax请求的method属性实现。不过文件上传场景下POST仍是最稳妥的选择，下面的方案会兼顾这个需求，提供可替换方法的示例。

需求2：文件输入blur事件触发后加载PHP并返回$neonInspi #

你的代码存在几个关键问题：短代码回调的语法错误、jQuery选择器匹配错误、文件上传未用FormData、PHP返回值未结构化。以下是修正后的完整代码：

1. 修正后的HTML与短代码部分 #

<input class="vh-radio-toggle" id="toggle8" type="radio" name="toggle" />
<label class="accordion-label" for="toggle8">I have an inspiration neon sign.</label>
<section id="content8">
    <label for="avatar">Send your inspirational custom neon logo image here:</label>
    <?php echo do_shortcode('[neon-inspire]');?>
</section>

// 修正后的短代码回调函数
function misha_uploader_callback(){
    // 初始化变量避免未定义报错，同时转义输出防止XSS风险
    $neonInspi = '';
    // 给输入框添加id，方便前端精准选择
    return '<input type="file" accept="image/png, image/jpeg" name="profilepicture" id="profilepicture" size="25" /> 
            <input type="text" name="neon_inspi" id="neon_inspi" value="' . esc_attr($neonInspi) . '">';
}
add_shortcode('neon-inspire', 'misha_uploader_callback');

2. 修正后的jQuery Ajax代码 #

// 绑定文件输入框的blur事件（而非文本输入框）
jQuery("#profilepicture").blur(function() {
    var fileInput = jQuery(this)[0];
    var selectedFile = fileInput.files[0];
    
    // 未选择文件时直接终止流程
    if (!selectedFile) {
        console.log("No file selected, aborting upload");
        return;
    }

    // 创建FormData对象处理文件上传（必须用这个才能传文件）
    var formData = new FormData();
    formData.append('profilepicture', selectedFile);

    var uploadUrl = "http://localhost/neonew/wp-content/themes/twentytwenty/process_upload.php";
    
    // 若要满足需求1，可将type改为'PUT'（需PHP端额外处理PUT请求，注释有示例）
    jQuery.ajax({
        url: uploadUrl,
        type: 'POST',
        data: formData,
        processData: false, // 禁止jQuery处理FormData，否则文件会损坏
        contentType: false, // 让浏览器自动设置正确的Content-Type
        success: function(response) {
            // 解析JSON格式的返回值，填充到文本输入框
            if (response.success) {
                jQuery("#neon_inspi").val(response.neonInspi);
                console.log("Upload successful: " + response.neonInspi);
            } else {
                console.error("Upload failed: " + response.message);
            }
        },
        error: function(xhr, status, error) {
            console.error("Request error: " + error);
        }
    });
});

3. 修正后的process_upload.php代码 #

<?php
// 加载WordPress环境
require( dirname(__FILE__) . '/../../../wp-load.php' );

// 设置响应为JSON格式，方便前端解析
header('Content-Type: application/json');

$response = array('success' => false, 'message' => '');

// 处理POST请求（若用PUT方法，需取消下面的注释并替换逻辑）
// if ($_SERVER['REQUEST_METHOD'] === 'PUT') {
//     $input = file_get_contents('php://input');
//     // PUT请求的文件解析逻辑相对复杂，建议优先用POST
// }

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $wpUploadDir = wp_upload_dir();
    $retryCount = 1;

    if (empty($_FILES['profilepicture'])) {
        $response['message'] = 'No file selected.';
        echo json_encode($response);
        exit;
    }

    $uploadedFile = $_FILES['profilepicture'];

    if ($uploadedFile['error']) {
        $response['message'] = $uploadedFile['error'];
        echo json_encode($response);
        exit;
    }

    if ($uploadedFile['size'] > wp_max_upload_size()) {
        $response['message'] = 'File exceeds maximum upload size.';
        echo json_encode($response);
        exit;
    }

    $fileMime = mime_content_type($uploadedFile['tmp_name']);
    if (!in_array($fileMime, get_allowed_mime_types())) {
        $response['message'] = 'File type is not allowed by WordPress.';
        echo json_encode($response);
        exit;
    }

    $filePath = $wpUploadDir['path'] . '/' . $uploadedFile['name'];
    // 处理文件重名问题
    while (file_exists($filePath)) {
        $retryCount++;
        $filePath = $wpUploadDir['path'] . '/' . $retryCount . '_' . $uploadedFile['name'];
    }

    // 执行文件上传
    if (move_uploaded_file($uploadedFile['tmp_name'], $filePath)) {
        $attachmentId = wp_insert_attachment(array(
            'guid' => $filePath,
            'post_mime_type' => $fileMime,
            'post_title' => preg_replace('/\.[^.]+$/', '', $uploadedFile['name']),
            'post_content' => '',
            'post_status' => 'inherit'
        ), $filePath);

        // 生成附件元数据（必须引入这个文件才能生效）
        require_once(ABSPATH . 'wp-admin/includes/image.php');
        wp_update_attachment_metadata($attachmentId, wp_generate_attachment_metadata($attachmentId, $filePath));

        $neonInspi = $wpUploadDir['url'] . '/' . basename($filePath);
        $response['success'] = true;
        $response['neonInspi'] = $neonInspi;
    } else {
        $response['message'] = 'Failed to save uploaded file to server.';
    }
}

echo json_encode($response);
?>

针对需求1的补充说明 #

如果你的“不使用POST/GET”是指不在请求体/URL中传递参数，仅获取预定义变量，可以用HEAD方法通过响应头传递变量：

jQuery.ajax({
    url: "path/to/your/variable.php",
    type: 'HEAD',
    success: function() {
        // 从响应头中获取变量值
        var neonInspi = this.getResponseHeader('X-Neon-Inspi');
        jQuery("#neon_inspi").val(neonInspi);
    }
});

对应的PHP端需要设置响应头：

header('X-Neon-Inspi: ' . $neonInspi);

不过这种方式仅适合传递少量字符串变量，文件上传场景仍建议用POST方法。

内容的提问来源于stack exchange，提问作者Back Upper