顯示上傳的圖片 - Drupal 7的形式API

Question

這裏是我的表單字段的用戶上傳自己公司的標誌：

$form['company_logo'] = array(
    '#type' => 'managed_file', 
    '#title' => t('Company Logo'), 
    '#description' => t('Allowed extensions: gif png jpg jpeg'), 
    '#upload_location' => 'public://uploads/', 
    '#default_value' => $row['companyLogo'], 
    '#upload_validators' => array(
    'file_validate_extensions' => array('gif png jpg jpeg'), 
    // Pass the maximum file size in bytes 
    'file_validate_size' => array(1024*1024*1024), 
), 

我想這樣做的是顯示自己的徽標後，他們點擊「上傳」。

我很驚訝這不是一個簡單的選項內置到窗體API ...怎麼能這樣做呢？

Answer 1

聲明一個主題功能

/** 
* Implements mymodule_thumb_upload theme callback. 
*/ 
function theme_mymodule_thumb_upload($variables) { 

    $element = $variables['element']; 

    if (isset($element['#file']->uri)) { 
     $output = '<div id="edit-logo-ajax-wrapper"><div class="form-item form-type-managed-file form-item-logo"><span class="file">'; 
     $output .= '<img height="50px" src="' . image_style_url('thumbnail', $element['#file']->uri) . '" />'; 
     $output .= '</span><input type="submit" id="edit-' . $element['#name'] . '-remove-button" name="' . $element['#name'] . '_remove_button" value="Remove" class="form-submit ajax-processed">'; 
     $output .= '<input type="hidden" name="' . $element['#name'] . '[fid]" value="' . $element['#file']->fid . '"></div></div>'; 
     return $output; 
    } 
} 

泰爾的Drupal這個主題功能可用於渲染的元素。

/** 
* Implements hook_theme(). 
*/ 
function mymodule_theme() { 
    return array(
    'mymodule_thumb_upload' => array(
     'render element' => 'element', 
    ) 
); 
} 

使用'#theme' => 'mymodule_thumb_upload',使託管文件調用元素的自定義主題函數。

<?php 
$form['company_logo'] = array(
    '#type' => 'managed_file', 
    '#title' => t('Company Logo'), 
    '#description' => t('Allowed extensions: gif png jpg jpeg'), 
    '#upload_location' => 'public://uploads/', 
    '#default_value' => $row['companyLogo'], 
    '#theme' => 'mymodule_thumb_upload', 
    '#upload_validators' => array(
    'file_validate_extensions' => array('gif png jpg jpeg'), 
    // Pass the maximum file size in bytes 
    'file_validate_size' => array(1024*1024*1024), 
), 

Answer 2

上一個答案的刪除按鈕也不適用於我。刷新頁面而不刪除圖像。相反，我從docroot/modules/image/image.field.inc的核心映像字段的theme_image_widget回調中複製。

/** 
* Implements theme_mymodule_thumb_upload theme callback. 
*/ 
function theme_mymodule_thumb_upload($variables) { 
    $element = $variables['element']; 
    $output = ''; 
    $output .= '<div class="image-widget form-managed-file clearfix">'; 

    // My uploaded element didn't have a preview array item, so this didn't work 
    //if (isset($element['preview'])) { 
    // $output .= '<div class="image-preview">'; 
    // $output .= drupal_render($element['preview']); 
    // $output .= '</div>'; 
    //} 

    // If image is uploaded show its thumbnail to the output HTML 
    if ($element['fid']['#value'] != 0) { 
    $output .= '<div class="image-preview">'; 

    // Even though I was uploading to public:// the $element uri was pointing to temporary://system, so the path to the preview image was a 404 
    //$output .= theme('image_style', array('style_name' => 'thumbnail', 'path' => file_load($element['fid']['#value'])->uri, 'getsize' => FALSE)); 

    $output .= theme('image_style', array('style_name' => 'thumbnail', 'path' => 'public://'.$element['#file']->filename, 'getsize' => FALSE)); 
    $output .= '</div>'; 
    } 

    $output .= '<div class="image-widget-data">'; 

    if ($element['fid']['#value'] != 0) { 
    $element['filename']['#markup'] .= ' <span class="file-size">(' . format_size($element['#file']->filesize) . ')</span> '; 
    } 

    // The remove button is already taken care of by rendering the rest of the form. No need to hack up some HTML! 
    $output .= drupal_render_children($element); 

    $output .= '</div>'; 
    $output .= '</div>'; 

    return $output; 
} 

使用這個主題功能來呈現元素：

/** 
* Implements hook_theme(). 
*/ 
function mymodule_theme() { 
    return array(
    'mymodule_thumb_upload' => array(
     'render element' => 'element', 
    ) 
); 
} 

表單元素定義：

$form['image_upload'] = array(
    '#type' => 'managed_file', 
    '#default_value' => $value, 
    '#title' => t('Thumbnail Image'), 
    '#description' => t('Upload a thumbnail'), 
    '#upload_location' => 'public://', 
    '#theme' => 'mymodule_thumb_upload', 
    '#progress_indicator' => 'throbber', 
    '#progress_message' => 'Uploading ...', 
    '#upload_validators' => array(
    'file_validate_is_image' => array(), 
    'file_validate_extensions' => array('jpg jpeg gif png'), 
    'file_validate_image_resolution' => array('600x400','300x200'), 
), 
);