File upload 在Drupal 7 Forms API中覆盖表单控件

我的页面中有三个表单控件：字段集、项类型和托管文件

function myid_user_page_form(){  
    $form = array();
    $form['id'] = array(
        '#type' => 'fieldset',
        '#title' => t('ID Information'),
        '#collapsible' => TRUE, 
        '#collapsed' => FALSE,
    );
    $form['id']['mymarkup'] = array(
        '#type' => 'item',
        '#markup' => 
            '<canvas id="cnv" name="cnv" width="500" height="100" style="border: 1px solid black;"></canvas>'
    );  
    $form['id']['custom_content_block_image'] = array(
        '#type' => 'managed_file',
        '#name' => 'custom_content_block_image',    
        '#size' => 40,      
        '#upload_location' => 'public://',
        '#theme' => 'myid_signature_upload',
    ); 
}

函数myid\u user\u page\u form（）{
$form=array（）；
$form['id']=数组(
“#类型”=>“字段集”，
“#title”=>t（“ID信息”），
“#可折叠”=>正确，
“#崩溃”=>错误，
);
$form['id']['mymarkup']=array(
“#类型”=>“项目”，
“#标记”=>
''
);  
$form['id']['custom\u content\u block\u image']=数组(
“#键入”=>“托管文件”，
“#名称”=>“自定义内容块图像”，
“#大小”=>40，
“#上传位置”=>“公共：/”，
“#主题”=>“myid_签名_上传”，
); 
}

当我点击“选择文件”按钮并上传图像时，它将如下所示：

我想在第一个表单控件位置/画布位置显示图像。我该怎么做

这是我的密码：

/**
  * Implements myid_signature_upload theme callback.
  */

function theme_myid_signature_upload($variables) {    
    $element = $variables['element'];
    $output = '';  
    if($element['fid']['#value'] != 0) {    
        $output .= '<div class="multifield-thumbnail">';
        $output .= theme('image_style', array('style_name' => 'thumbnail',                   'path' => file_load($element['fid']['#value'])->uri, 'getsize' => FALSE));
        $output .= drupal_render_children($element);
        $output .= '</div>';
    }
    return $output;  
}
function myid_theme(){
    return array(    
        'myid_signature_upload' => array(
            'render element' => 'element',     
        ),
    ); 
}

/**
*实现myid\u签名\u上载主题回调。
*/
函数主题\u myid\u签名\u上载（$variables）{
$element=$variables['element']；
$output=''；
如果（$element['fid']['#value']！=0）{
$output.=''；
$output.=theme（'image_style'，array（'style_name'=>'缩略图'，'path'=>文件加载（$element['fid']['#value']）->uri，'getsize'=>FALSE））；
$output.=drupal\u render\u子元素（$element）；
$output.=''；
}
返回$output；
}
函数myid_theme（）{
返回数组（
“myid\u签名\u上传”=>数组(
“渲染元素”=>“元素”，
),
); 
}

尝试将上载的图像显示用画布标记包装在

主题\u myid\u签名\u upload（）

中

function theme_myid_signature_upload($variables) {    
    $element = $variables['element'];
    $output = '';  
    if($element['fid']['#value'] != 0) {
        // open canvas tag <canvas ... >    
        $output .= '<canvas id="cnv" name="cnv" width="500" height="100" style="border: 1px solid black;">';
        $output .= theme('image_style', array('style_name' => 'thumbnail',                   
                   'path' => file_load($element['fid']['#value'])->uri, 'getsize' => FALSE));
        $output .= drupal_render_children($element);
        // close canvas tag </canvas>
        $output .= '</canvas>';
    }
    return $output;  
}

函数主题\u myid\u签名\u上传（$variables）{
$element=$variables['element']；
$output=''；
如果（$element['fid']['#value']！=0）{
//打开画布标签
$output.=''；
$output.=主题（'image\u style'，数组（'style\u name'=>'thumbnail'，
'path'=>file_load（$element['fid']['#value']）->uri，'getsize'=>FALSE））；
$output.=drupal\u render\u子元素（$element）；
//关闭画布标记
$output.=''；
}
返回$output；
}

您只想在画布内显示图像，还是同时使用上载文件字段？@Muhammad Reda-->我只想在画布位置显示上载的图像并隐藏画布。-->我尝试过，但画布变成了两个。另一种选择是隐藏画布标记。我该怎么做？从表单

myid\u user\u page\u表单

中删除画布。它不再需要了。画布已经覆盖了我的图像和删除按钮。如何使它再次可见？我认为这是一个css问题。你可以用css来解决这个问题。