Drupal7通过form API 建立无刷新的图片上传功能的四个方法

本文我们讲讲在Drupal 7通过form API 实现无刷新图片上传的几个方法,比较实用,喜欢drupal建站的朋友可以参考一下.

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

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

1. function testmodule_forma($form, &$form_state){ 
2. $form['im-container'] = array( 
3.     '#prefix'=>'<div id="im-area">', 
4.     '#suffix'=>'</div>', 
5. ); 
6.  
7. $form['image_file'] = array( 
8.     '#type' => 'file', 
9. ); 
10.  
11. $form['upload'] = array( 
12.    '#type' => 'submit', 
13.    '#value' => 'upload', 
14.    '#submit' => array('upload_image'), 
15.    '#ajax'=> array( 
16.       'callback'=>'upload_image', 
17.       'wrapper'=> 'im-area', 
18.       'method'=> 'replace', 
19.       'effect'=> 'fade', 
20.    ), 
21. ); 
22. return $form; 
23. } 
24.  
25. function upload_image($form, $form_state){ 
26.  
27. $file = file_save_upload('image_file', array('file_validate_extensions' => array('png gif jpg jpeg')), "public://",$replace = FILE_EXISTS_REPLACE); 
28. if ($file) 
29. { 
30.     $file->status=FILE_STATUS_PERMANENT; 
31.     file_save($file); 
32.     $form['im-container']=array( 
33.         '#title'=>t('Preview:'), 
34.         '#prefix'=>'<div id="im-area">', 
35.         '#markup'=>'<img src="sites/default/files/'.$file->filename.'" height="250" width="250" />', 
36.         '#suffix'=>'</div>', 
37.     ); //Vevb.com 
38. } 
39. else { 
40.     drupal_set_message('No file uploaded.'); 
41. } 
42.  
43. return $form['im-container']; 
44. } 

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

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

1. $form['image_example_image_fid'] = array( 
2.   '#title' => t('<a href="/project/image" class="alinks-link" title="模块介绍:让有特定权限的用户可以上传图片到网站里，并且会自动产生缩图。图片可以使用在文章里(例如透过tinymce编辑工具进行选取)，或是作成简单的网络相簿。">Image</a>'), 
3.   '#type' => 'managed_file', 
4.   '#description' => t('The uploaded image will be displayed on this page using the image style choosen below.'), 
5.   '#default_value' => variable_get('image_example_image_fid', ''), 
6.   '#upload_location' => 'public://image_example_images/', 
7. ); 

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

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

1. File: auto_upload.info 
2.  
3. name = Auto Upload 
4. description = Removes the need for users to press the 'Upload' button for AJAX file uploads. 
5. core = 7.x 
6. dependencies[] = file 
7.  
8.  
9. File: auto_upload.js: 
10.  
11.  
12. (function ($) { 
13.   Drupal.behaviors.autoUpload = { 
14.     attach: function (<a href="/project/context" class="alinks-link" title="模块介绍:就是“根据某些条件”显示“某些区块”">context</a>, settings) { 
15.       $('form', context).delegate('input.form-file', 'change', function() {   
16.         $(this).next('input[type="submit"]').mousedown(); 
17.       });  
18.     } 
19.   }; 
20. })(jQuery); 
21.  
22.  
23. File: auto_upload.module 
24.  
25.  
26. function auto_upload_init() { 
27.   drupal_add_js(drupal_get_path('module', 'auto_upload') . '/auto_upload.js'); 
28. } 

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

1. <?php 
2. /** 
3.  * Implements hook_field_widget_form(). 
4.  */ 
5. function multifield_field_widget_form(&$form, &$form_state, $field, $instance, $langcode, $items, $delta, $element) { 
6.  
7.   //Get the default format for user 
8.   $default_format  = array_shift(filter_formats($GLOBALS['user']))->format; 
9.  
10.   $field_name = $instance['field_name']; 
11.  
12.   $item =& $items[$delta]; 
13.  
14.   switch($instance['widget']['type']) { 
15.  
16.     case 'multifield_base_widget': 
17.       $element['img1_upload'] = array( 
18.         '#title' => t('Image'), 
19.         '#type' => 'managed_file', 
20.         '#upload_location' => 'public://multifield_images/', 
21.         '#default_value' => isset($item['img1_upload']) ? $item['img1_upload'] : 0, 
22.         // assign #theme directly to the managed_file in other case it won't be 
23.         // rebuilt after file upload 
24.         '#theme' => 'image_multifield_multitype', 
25.       ); 
26.   } 
27.   return $element; 
28. } 
29.  
30. /** 
31.  * Implements hook_theme(). 
32.  */ 
33. function multifield_theme() { 
34.   return array( 
35.     'image_multifield_multitype' => array( 
36.       'render element' => 'element', 
37.     ), 
38.   ); 
39. } 
40.  
41. /** 
42.  * Returns HTML for a managed file element with thumbnail. 
43.  */ 
44. function theme_image_multifield_multitype($variables) { 
45.   $element = $variables['element']; 
46.  
47.   $output = ''; 
48.  
49.  
50.   if($element['fid']['#value'] != 0) { 
51.     // if image is uploaded show its thumbnail to the output HTML 
52.     $output .= '<div class="multifield-thumbnail">'; 
53.     //$output .= theme('image_style', array('style_name' => 'thumbnail', 'path' => file_load($element['fid']['#value'])->uri, 'getsize' => FALSE)); 
54.     $output .= '<img src="' . image_style_url('medium', file_load($element['fid']['#value'])->uri). '" class="thumbnail"/>'; 
55.     $output .= drupal_render_children($element); // renders rest of the element as usual 
56.     $output .= '</div>'; 
57.   } 
58. return $output; // of course, has to be returned back 
59.   } 
60. ?> 

方法4:用第三方模块

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