Xem trước hình ảnh sau khi tải lên bằng API mẫu

Tôi đã tải lên một tệp hình ảnh bằng cách sử dụng managed_fileloại API Mẫu, nhưng sau khi tải lên hình ảnh, nó không xuất hiện dưới dạng hình thu nhỏ bên cạnh trường. Những gì được kết xuất là tên tệp của hình ảnh với một liên kết đến hình ảnh và một biểu tượng nhỏ.

Làm cách nào để hiển thị hình thu nhỏ của hình ảnh sau khi tải lên (như xem trước hình ảnh từ trường Hình ảnh cốt lõi)?

Ngoài ra, làm cách nào để hiển thị hình ảnh mặc định bên cạnh nó (nếu nó có giá trị mặc định)?

Đây là mã của tôi:

$form['logo'] = array(
      '#title' => t('Logo'),
      '#type' => 'managed_file',
      '#required' => TRUE,
      '#default_value' => variable_get('logo', ''),
      '#upload_location' => 'public://',
      '#upload_validators' => array(
            'file_validate_extensions' => array('gif png jpg jpeg'),
            'file_validate_size' => array(0.3*1024*1024),
  )

Tôi đã giải quyết vấn đề với một sửa chữa đơn giản. Bạn có thể thêm một chủ đề vào thành phần biểu mẫu "tbs_thumb_upload" và trong tệp chủ đề, xử lý phần tử như được đề cập trong mã tệp chủ đề.

 // THIS IS THE FILE FIELD  
 $form['logo'] = array(
  '#type' => 'managed_file',
  '#title' => t('Logo'),
  '#description' => t('Allowed extensions: gif png jpg jpeg'),
  '#upload_validators' => array(
    'file_validate_extensions' => array('gif png jpg jpeg'),
    // Pass the maximum file size in bytes
    'file_validate_size' => array(1 * 1024 * 1024),
  ),
  '#theme' => 'tbs_thumb_upload',
  '#upload_location' => 'public://society/',
  '#attributes' => array('default_image_path' => TBS_IMAGE_DEFAULT_SOCIETY)
  );

 // THIS IS THE THEME FILE : THEME : tbs_thumb_upload : Theme file code
 if (!empty($form['#file'])) {
   $uri = $form['#file']->uri;
   $desc = FALSE;
 }else {
   $uri = $form['#attributes']['default_image_path'];
   $desc = TRUE;
 }

 // Render form element
 print drupal_render_children($form);

Xác định chủ đề trong trường và mô phỏng cấu trúc mã để xem trước hình ảnh mà bạn vừa tải lên. Giải pháp của tôi là như sau,

$form['abc_field']['abc_filename'] = array(
        '#type' => 'managed_file',
        '#title' => t('abc image'),
        '#upload_validators' => array(
            'file_validate_extensions' => array('gif png jpg jpeg'),
            'file_validate_size' => array(1 * 1024 * 1024),
        ),
        '#theme' => 'abc_thumb_upload',
        '#upload_location' => 'public://abc/'
    );

Trong hook_theme (),

return array(
    'abc_thumb_upload' => array(
        'render element' => 'element',
        'file'           => 'abc.module',
));

Trong theme_abc_thumb_upload (), của bạn

function theme_abc_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="' . file_create_url($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 . '">';

        return $output;
    }
}

về kích thước kiểm tra tệp xác thực này_validate_image_resolution :

$form['logo'] = array(
      '#title' => t('Logo'),
      '#type' => 'managed_file',
      '#required' => TRUE,
      '#default_value' => variable_get('logo', ''),
      '#upload_location' => 'public://',
      '#upload_validators' => array(
            'file_validate_extensions' => array('gif png jpg jpeg'),
            'file_validate_size' => array(0.3*1024*1024),
            'file_validate_image_resolution'=>array('100x100'),
  )

Việc hack HTML để xóa nút không hoạt động đối với tôi. Trang làm mới mà không xóa hình ảnh. Thay vào đó tôi đã sao chép từ theme_image_widgetcuộc gọi lại của trường hình ảnh cốt lõi được tìm thấy trong docroot/modules/image/image.field.inc.

/**
* 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;
}

Sử dụng chức năng chủ đề này để kết xuất phần tử:

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

Định nghĩa thành phần mẫu:

$form['upload_image'] = array(
  '#type' => 'managed_file',
  '#default_value' => $value,
  '#title' => t('Image'),
  '#description' => t('Upload an image'),
  '#upload_location' => 'public://',
  '#theme' => 'mymodule_thumb_upload',
  '#upload_validators' => array(
    'file_validate_is_image' => array(),
    'file_validate_extensions' => array('jpg jpeg gif png'),
    'file_validate_image_resolution' => array('600x400','300x200'),
  ),
);

Thêm một yếu tố biểu mẫu khác để chứa đánh dấu cho bản xem trước hình ảnh của bạn. Trong mã dưới đây, $ v chứa các giá trị biểu mẫu quan tâm. Trường hợp cụ thể của bạn có thể kéo chúng từ một nút, từ trạng thái biểu mẫu hoặc ở một nơi khác. Nó là một đối tượng tập tin được đúc thành một mảng.

// If there is a file id saved
if (!empty($v['fid'])) {
  // If there is no file path, a new file is uploaded
  // save it and try to fetch an image preview
  if (empty($v['uri'])) {
    $file = file_load($v['fid']);
    // Change status to permanent so the image remains on the filesystem. 
    $file->status = FILE_STATUS_PERMANENT;
    $file->title  = $v['title'];
    // Save.
    file_save($file);
    global $user;
    file_usage_add($file, 'node', 'node', $user->uid);
    $v = (array)$file;
  }
  $form['photos']['items'][$i]['preview']['#markup'] = theme(
    'image_style',
    array(
      'style_name' => 'form_image_preview',
      'path' => file_build_uri(file_uri_target($v['uri']))
    )
  );
}

Lưu ý rằng tôi đặt trạng thái tệp thành vĩnh viễn và lưu lại. Điều này là cho các hình ảnh được tải lên để được xem trước chính xác. Các kiểu hình ảnh không thể được tạo cho các hình ảnh trong bộ lưu trữ tạm thời, vì vậy bạn phải gắn cờ chúng dưới dạng perm. Tùy thuộc vào trường hợp sử dụng và quy trình làm việc của bạn, bạn có thể phải xử lý các hình ảnh "mồ côi".

Cấu trúc biểu mẫu của tôi ($ form ['photos'] ['items'] [$ i]) dành cho trường hình ảnh đa mục. Tôi có một mẫu chủ đề tập hợp chúng và đặt chúng vào drupal_add_tablesrag . Cấu trúc mảng biểu mẫu của bạn sẽ có khả năng khác nhau.