ดูตัวอย่างรูปภาพหลังจากอัพโหลดโดยใช้ Form API

ฉันอัปโหลดไฟล์ภาพโดยใช้managed_fileแบบฟอร์ม API แต่หลังจากอัปโหลดภาพแล้วไฟล์ดังกล่าวจะไม่ปรากฏเป็นภาพขนาดย่อข้างฟิลด์ สิ่งที่แสดงผลคือชื่อไฟล์ของรูปภาพที่มีลิงก์ไปยังรูปภาพและไอคอนขนาดเล็ก

ฉันจะแสดงภาพขนาดย่อของภาพหลังจากอัพโหลดได้อย่างไร (เช่นภาพตัวอย่างจากฟิลด์แกนภาพ)

นอกจากนี้ฉันจะแสดงภาพเริ่มต้นข้างๆมันได้อย่างไร (หากมีค่าเริ่มต้น)

นี่คือรหัสของฉัน:

$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),
  )

ฉันแก้ไขปัญหาด้วยการแก้ไขง่ายๆ คุณสามารถเพิ่มธีมให้กับองค์ประกอบแบบฟอร์ม "tbs_thumb_upload" และในไฟล์ธีมให้องค์ประกอบดังกล่าวในรหัสไฟล์ธีม

 // 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);

กำหนดธีมในฟิลด์และจำลองโครงสร้างโค้ดเพื่อดูตัวอย่างรูปภาพที่คุณเพิ่งอัปโหลด ทางออกของฉันมีดังนี้

$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/'
    );

ใน hook_theme ของคุณ ()

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

ใน theme_abc_thumb_upload () ของคุณ

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

เกี่ยวกับการตรวจสอบขนาดการตรวจสอบนี้file_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'),
  )

การแฮ็กค่า HTML สำหรับปุ่มลบไม่ทำงานสำหรับฉัน รีเฟรชหน้าโดยไม่ต้องลบภาพ แต่ผมคัดลอกจากภาพสนามแม่เหล็กของแกนของการเรียกกลับพบในtheme_image_widgetdocroot/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;
}

ใช้ฟังก์ชันชุดรูปแบบนี้เพื่อแสดงองค์ประกอบ:

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

ข้อกำหนดองค์ประกอบของแบบฟอร์ม:

$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'),
  ),
);

เพิ่มองค์ประกอบแบบฟอร์มอื่นเพื่อให้มีมาร์กอัปสำหรับภาพตัวอย่างของคุณ ในรหัสด้านล่าง $ v มีค่ารูปแบบที่น่าสนใจ กรณีเฉพาะของคุณอาจดึงพวกเขาจากโหนดจากสถานะฟอร์มหรือที่อื่น มันเป็นวัตถุที่โยนไฟล์ไปยังอาร์เรย์

// 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']))
    )
  );
}

โปรดทราบว่าฉันตั้งค่าสถานะไฟล์เป็นถาวรและบันทึกอีกครั้ง นี่เป็นภาพที่อัปโหลดเพื่อแสดงตัวอย่างได้อย่างถูกต้อง ไม่สามารถสร้างสไตล์ของภาพสำหรับภาพในที่เก็บข้อมูลชั่วคราวได้ดังนั้นคุณต้องตั้งค่าสถานะเป็นอนุญาต ขึ้นอยู่กับกรณีการใช้งานและเวิร์กโฟลว์ของคุณคุณอาจต้องระบุที่อยู่ของภาพ "กำพร้า"

โครงสร้างแบบฟอร์มของฉัน ($ form ['photos'] ['items'] [$ i]) ใช้สำหรับฟิลด์รูปภาพหลายรายการ ฉันมีแม่แบบรูปแบบที่รวบรวมพวกเขาและทำให้พวกเขาในdrupal_add_tabledrag โครงสร้างอาร์เรย์แบบฟอร์มของคุณอาจแตกต่างกัน