Drupal 7 开发内部培训资料, 分头诗人

Drupal 7 通过form API 建立无刷新的图片上传功能

猪跑啦独家原创专稿,欢迎您转载本文,转载请注明来源。

表单是网站常用的,不可缺少的。而通过表单建立图片上传也是刚需,基本每个网站都需要图片上传功能,现在比较流行的是直接无刷新上传图片,无刷新上传图片在drupal7 如何做呢?下面代码就是实现此功能。

方法1:用file原件配合ajax参数实现:

function testmodule_forma($form, &$form_state){
$form['im-container'] = array(
    '#prefix'=>'<div id="im-area">',
    '#suffix'=>'</div>',
);

$form['image_file'] = array(
    '#type' => 'file',
);

$form['upload'] = array(
   '#type' => 'submit',
   '#value' => 'upload',
   '#submit' => array('upload_image'),
   '#ajax'=> array(
      'callback'=>'upload_image',
      'wrapper'=> 'im-area',
      'method'=> 'replace',
      'effect'=> 'fade',
   ),
);
return $form;
}

function upload_image($form, $form_state){

$file = file_save_upload('image_file', array('file_validate_extensions' => array('png gif jpg jpeg')), "public://",$replace = FILE_EXISTS_REPLACE);
if ($file)
{
    $file->status=FILE_STATUS_PERMANENT;
    file_save($file);
    $form['im-container']=array(
        '#title'=>t('Preview:'),
        '#prefix'=>'<div id="im-area">',
        '#markup'=>'<img src="sites/default/files/'.$file->filename.'" height="250" width="250" />',
        '#suffix'=>'</div>',
    );
}
else {
    drupal_set_message('No file uploaded.');
}

return $form['im-container'];
}

方法2:直接使用 manage_file 原件实现:

上面的方式是需要配一个上传按钮,然而在drupal 7 有一个更好的表单原件 manage_file,可以通过manage_file实现无刷新上传。

$form['image_example_image_fid'] = array(
  '#title' => t('Image'),
  '#type' => 'managed_file',
  '#description' => t('The uploaded image will be displayed on this page using the image style choosen below.'),
  '#default_value' => variable_get('image_example_image_fid', ''),
  '#upload_location' => 'public://image_example_images/',
);

 

方法3:使用manage_file 原件 配合js 实现不需要点击上传按钮直接上传:

上面两种方式都可以实现无刷新上传,但界面并不友好,两种方式都是需要点击上传按钮才触发上传,我们更多时候是不想有上传按钮,下面这个方式就可以做到:

File: auto_upload.info

name = Auto Upload
description = Removes the need for users to press the 'Upload' button for AJAX file uploads.
core = 7.x
dependencies[] = file

 

File: auto_upload.js:

(function ($) {
  Drupal.behaviors.autoUpload = {
    attach: function (context, settings) {
      $('form', context).delegate('input.form-file', 'change', function() {  
        $(this).next('input[type="submit"]').mousedown();
      }); 
    }
  };
})(jQuery);

 

File: auto_upload.module

function auto_upload_init() {
  drupal_add_js(drupal_get_path('module', 'auto_upload') . '/auto_upload.js');
}

 

我们还可以再优化下,让上传图片时候,显示缩略图:

<?php
/**
 * Implements hook_field_widget_form().
 */
function multifield_field_widget_form(&$form, &$form_state, $field, $instance, $langcode, $items, $delta, $element) {

  //Get the default format for user
  $default_format  = array_shift(filter_formats($GLOBALS['user']))->format;

  $field_name = $instance['field_name'];

  $item =& $items[$delta];

  switch($instance['widget']['type']) {

    case 'multifield_base_widget':
      $element['img1_upload'] = array(
        '#title' => t('Image'),
        '#type' => 'managed_file',
        '#upload_location' => 'public://multifield_images/',
        '#default_value' => isset($item['img1_upload']) ? $item['img1_upload'] : 0,
        // assign #theme directly to the managed_file in other case it won't be
        // rebuilt after file upload
        '#theme' => 'image_multifield_multitype',
      );
  }
  return $element;
}

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

/**
 * Returns HTML for a managed file element with thumbnail.
 */
function theme_image_multifield_multitype($variables) {
  $element = $variables['element'];

  $output = '';


  if($element['fid']['#value'] != 0) {
    // if image is uploaded show its thumbnail to the output HTML
    $output .= '<div class="multifield-thumbnail">';
    //$output .= theme('image_style', array('style_name' => 'thumbnail', 'path' => file_load($element['fid']['#value'])->uri, 'getsize' => FALSE));
    $output .= '<img src="' . image_style_url('medium', file_load($element['fid']['#value'])->uri). '" class="thumbnail"/>';
    $output .= drupal_render_children($element); // renders rest of the element as usual
    $output .= '</div>';
  }
return $output; // of course, has to be returned back
  }
?>

 

方法4:用第三方模块

还有一种方式比较简单直接,就是直接用第三方模块,例如Drag & Drop Upload 模块,就能实现无刷新上传,并且还支持拖拽,挺好的。