WordPress Metabox无法保存多文件输入值问题求助

核心问题排查 #

• 表单编码缺失：文件上传必须使用multipart/form-data编码，默认文章编辑表单无此属性，导致文件数据无法提交。
• File输入命名错误：带multiple的file输入，name属性需设为数组格式（name="xxx[]"），否则只能获取单个文件。
• 数据获取位置错误：文件数据存储在$_FILES而非$_POST中，原代码读取$_POST自然拿不到值。
• 未使用媒体库API：直接保存临时文件路径无效，临时文件会被系统自动清理，必须通过WordPress媒体库处理上传，保存附件ID。
• Meta值读取方式错误：原代码用get_post_meta(..., true)获取数组类型的meta值，会返回单个元素而非完整数组，导致循环失效。

分步修复代码 #

1. 给文章编辑表单添加文件上传编码 #

在主题functions.php中添加以下代码，修改表单编码：

add_action('post_edit_form_tag', function() {
    echo ' enctype="multipart/form-data"';
});

2. 调整Metabox的File输入及已上传文件显示 #

修改diwp_custom_metabox_callback函数，修正输入命名并添加已上传文件预览：

function diwp_custom_metabox_callback(){ 
    global $post; 
    // 获取已保存的附件ID数组
    $saved_file_ids = get_post_meta($post->ID, 'post_reading_time', true) ?: [];
    ?> 

    <div class="row">
        <div class="label">上传图片</div>
        <div class="fields">
            <!-- 多文件上传输入，name设为数组格式 -->
            <input multiple type="file" name="_diwp_reading_time[]" />
            
            <!-- 显示已上传的图片 -->
            <?php if(!empty($saved_file_ids)): ?>
                <div class="uploaded-files" style="margin-top:10px;">
                    <?php foreach($saved_file_ids as $file_id): ?>
                        <?php $file_url = wp_get_attachment_url($file_id); ?>
                        <?php if($file_url): ?>
                            <img src="<?php echo esc_url($file_url); ?>" style="max-width:100px; margin-right:10px; border:1px solid #eee;" />
                            <!-- 隐藏字段保留已上传的附件ID，防止保存时丢失 -->
                            <input type="hidden" name="_existing_files[]" value="<?php echo esc_attr($file_id); ?>" />
                        <?php endif; ?>
                    <?php endforeach; ?>
                </div>
            <?php endif; ?>
        </div>
    </div> 

    <?php 
}

3. 重写保存函数，处理文件上传与附件存储 #

替换原diwp_save_custom_metabox函数，用WordPress媒体库API处理上传：

function diwp_save_custom_metabox($post_id){ 
    // 跳过自动保存和修订版本
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
    if (wp_is_post_revision($post_id)) return;
    // 检查权限（可选，根据自定义类型调整）
    if (!current_user_can('edit_post', $post_id)) return;

    // 初始化已有的附件ID数组
    $existing_files = isset($_POST['_existing_files']) ? array_map('intval', $_POST['_existing_files']) : [];

    // 处理新上传的文件
    if(isset($_FILES['_diwp_reading_time']) && is_array($_FILES['_diwp_reading_time']['name'])){
        $files = $_FILES['_diwp_reading_time'];
        
        foreach($files['name'] as $key => $file_name){
            // 跳过错误的文件
            if($files['error'][$key] !== UPLOAD_ERR_OK) continue;
            
            $tmp_file = $files['tmp_name'][$key];
            // 验证文件类型
            $file_type = wp_check_filetype($file_name);
            if(empty($file_type['ext'])) continue;

            // 处理上传
            $upload_result = wp_handle_upload(
                [
                    'name'     => $file_name,
                    'tmp_name' => $tmp_file,
                    'type'     => $files['type'][$key],
                    'size'     => $files['size'][$key],
                    'error'    => $files['error'][$key]
                ],
                ['test_form' => false] // 跳过WordPress默认表单验证
            );

            // 上传成功则创建附件
            if(!isset($upload_result['error'])){
                $attachment_args = [
                    'post_mime_type' => $file_type['type'],
                    'post_title'     => sanitize_file_name($file_name),
                    'post_content'   => '',
                    'post_status'    => 'inherit'
                ];
                $attachment_id = wp_insert_attachment($attachment_args, $upload_result['file'], $post_id);
                
                // 生成附件元数据（缩略图等）
                require_once(ABSPATH . 'wp-admin/includes/image.php');
                $attachment_meta = wp_generate_attachment_metadata($attachment_id, $upload_result['file']);
                wp_update_attachment_metadata($attachment_id, $attachment_meta);
                
                // 将新附件ID加入数组
                $existing_files[] = $attachment_id;
            }
        }
    }

    // 去重并更新Post Meta，保存附件ID数组
    $existing_files = array_unique($existing_files);
    update_post_meta($post_id, 'post_reading_time', $existing_files);
}

add_action('save_post', 'diwp_save_custom_metabox');

4. 修正前端输出代码，循环显示多文件 #

替换文章详情页的输出代码，正确读取附件ID并显示图片：

<?php
$saved_file_ids = get_post_meta(get_the_ID(), 'post_reading_time', true);
if(!empty($saved_file_ids) && is_array($saved_file_ids)){
    foreach($saved_file_ids as $file_id){
        $file_url = wp_get_attachment_url($file_id);
        if($file_url){
            echo '<div class="image-item animate-box">
                    <img src="' . esc_url($file_url) . '" class="img-responsive" alt="上传图片">
                  </div>';
        }
    }
}
?>

内容的提问来源于stack exchange，提问作者soheil noohi