如何在WordPress自定义插件中无需独立upload.php实现文件上传？

核心思路 #

不用独立的upload.php，直接利用WordPress内置的Ajax接口（admin-ajax.php），结合WP的权限机制和wp_upload_dir()函数处理上传，既安全又不用手动引入wp-load.php。

步骤1：在插件主文件中注册Ajax处理逻辑 #

将以下代码添加到你的自定义插件主PHP文件中：

// 注册Ajax动作（登录用户可用）
add_action('wp_ajax_custom_plugin_upload', 'custom_plugin_handle_upload');
// 注册Ajax动作（未登录用户可用，根据需求选择保留）
add_action('wp_ajax_nopriv_custom_plugin_upload', 'custom_plugin_handle_upload');

function custom_plugin_handle_upload() {
    // 验证nonce（安全必备）
    if (!isset($_POST['upload_nonce']) || !wp_verify_nonce($_POST['upload_nonce'], 'custom_plugin_upload_nonce')) {
        wp_send_json_error('无效的安全验证');
    }

    // 检查是否有文件上传
    if (!isset($_FILES['file']) || $_FILES['file']['error'] !== UPLOAD_ERR_OK) {
        wp_send_json_error('文件上传失败');
    }

    // 获取WordPress默认上传目录信息
    $upload_dir = wp_upload_dir();
    $target_dir = $upload_dir['path'] . '/'; // 当前年月的uploads子目录
    $filename = sanitize_file_name($_FILES['file']['name']);
    $target_path = $target_dir . $filename;

    // 检查目录是否存在，不存在则创建
    if (!file_exists($target_dir)) {
        wp_mkdir_p($target_dir);
    }

    // 移动上传文件到目标路径
    if (move_uploaded_file($_FILES['file']['tmp_name'], $target_path)) {
        // 可选：将文件添加到媒体库
        $attachment = array(
            'guid'           => $upload_dir['url'] . '/' . $filename,
            'post_mime_type' => $_FILES['file']['type'],
            'post_title'     => sanitize_text_field($filename),
            'post_content'   => '',
            'post_status'    => 'inherit'
        );
        $attach_id = wp_insert_attachment($attachment, $target_path);
        
        // 生成附件元数据（可选）
        require_once(ABSPATH . 'wp-admin/includes/image.php');
        $attach_data = wp_generate_attachment_metadata($attach_id, $target_path);
        wp_update_attachment_metadata($attach_id, $attach_data);

        wp_send_json_success(array(
            'message' => '上传成功',
            'file_url' => $upload_dir['url'] . '/' . $filename,
            'attachment_id' => $attach_id
        ));
    } else {
        wp_send_json_error('文件移动失败');
    }

    wp_die(); // 必须结束Ajax请求
}

步骤2：修改前端JS代码 #

替换你原来的JS，改为调用WP的Ajax接口，同时添加安全nonce：

<input type="file" name="fileupload" id="fileupload">
<button id="upload-button" onclick="saveFile()">Upload</button>

<script>
async function saveFile() {
    const fileInput = document.getElementById('fileupload');
    if (!fileInput.files.length) {
        alert('请选择文件');
        return;
    }

    let formData = new FormData();
    formData.append("file", fileInput.files[0]);
    // 添加安全nonce（从WP后端获取）
    formData.append("upload_nonce", "<?php echo wp_create_nonce('custom_plugin_upload_nonce'); ?>");
    // 指定Ajax动作名，对应后端注册的动作
    formData.append("action", "custom_plugin_upload");

    try {
        const response = await fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
            method: "POST",
            body: formData
        });

        const result = await response.json();
        if (result.success) {
            console.log('上传成功:', result.data);
            alert('上传成功');
        } else {
            console.error('上传失败:', result.data);
            alert('上传失败: ' + result.data);
        }
    } catch (error) {
        console.error('请求出错:', error);
        alert('请求出错');
    }
}
</script>

关键说明 #

• 安全验证：必须使用wp_create_nonce和wp_verify_nonce防止CSRF攻击，这是WordPress开发的安全规范。
• wp_upload_dir()：该函数会自动获取当前WordPress配置的上传目录，返回包含path（服务器绝对路径）和url（访问URL）的数组，自动按年月创建子目录（符合WP默认上传规则）。
• 媒体库集成：代码中可选的wp_insert_attachment部分可以将上传的文件添加到WP媒体库，方便后续管理，如果不需要可以删除这部分。
• 权限控制：如果只允许登录用户上传，保留wp_ajax_custom_plugin_upload即可，删除wp_ajax_nopriv_custom_plugin_upload。

替代方案：使用WP媒体库的原生上传组件 #

如果不需要自定义上传逻辑，也可以直接调用WordPress原生的媒体上传弹窗，无需自己写Ajax：

// 点击按钮触发媒体上传
document.getElementById('upload-button').addEventListener('click', function() {
    const mediaUploader = wp.media({
        title: '选择或上传文件',
        button: { text: '使用此文件' },
        multiple: false
    });

    mediaUploader.on('select', function() {
        const attachment = mediaUploader.state().get('selection').first().toJSON();
        console.log('文件URL:', attachment.url);
        // 这里可以将URL保存到表单或数据库
    });

    mediaUploader.open();
});

注：此方案需要确保wp-media脚本已加载，可通过wp_enqueue_script('wp-media')在插件中引入。

内容的提问来源于stack exchange，提问作者Noufal Binu