本文我們講講在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 模塊,就能實現無刷新上傳,并且還支持拖拽,挺好的.