表单是网站常用的，不可缺少的。而通过表单建立图片上传也是刚需，基本每个网站都需要图片上传功能，现在比较流行的是直接无刷新上传图片，无刷新上传图片在drupal7 如何做呢？下面代码就是实现此功能。
方法1：用file原件配合ajax参数实现：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
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实现无刷新上传。
|
1 2 3 4 5 6 7 |
$form['image_example_image_fid'] = array( '#title' => t('<a href="/project/image" title="模块介绍：让有特定权限的用户可以上传图片到网站里，并且会自动产生缩图。图片可以使用在文章里（例如透过tinymce编辑工具进行选取），或是作成简单的网络相簿。">Image</a>'), '#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
|
1 2 3 4 |
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:
|
1 2 3 4 5 6 7 8 9 |
(function ($) { Drupal.behaviors.autoUpload = { attach: function (<a href="/project/context" class="alinks-link" title="模块介绍：就是“根据某些条件”显示“某些区块”">context</a>, settings) { $('form', context).delegate('input.form-file', 'change', function() { $(this).next('input[type="submit"]').mousedown(); }); } }; })(jQuery); |
File: auto_upload.module
|
1 2 3 |
function auto_upload_init() { drupal_add_js(drupal_get_path('module', 'auto_upload') . '/auto_upload.js'); } |
我们还可以再优化下，让上传图片时候，显示缩略图：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<?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>'; //$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). '"/>'; $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 模块，就能实现无刷新上传，并且还支持拖拽，挺好的。
