Drupal7 uses the form API to create four methods for refreshing the image upload function

Forms are commonly used and indispensable for websites. Creating an image Upload through a form is also just needed. Basically, each website requires the image upload function. Currently, it is quite popular to directly upload images without refreshing new ones. What should I do in drupal7? The following code implements this function.

Method 1: use the original file with ajax parameters:

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-region', 'method' => 'replace ', 'effect' => 'Fade ',),); return $ form ;} function upload_image ($ form, $ form_state) {$ file = file_save_upload ('image _ file ', array ('File _ validate_extension' => 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' => ' filename. '"height =" 250 "width =" 250 "/>', '# suffix' => '</div> ',);} else {drupal_set_message ('No file uploaded. ');} return $ form ['im-container'];}

Method 2: directly use the original manage_file:

The above method requires an upload button. However, there is a better form original manage_file in drupal 7, and you can use manage_file to achieve no refreshing Upload.

$ Form ['image _ example_image_fid'] = array ('# title' => t (' <a href = "/project/image" class = "alinks-link" title = "Module Introduction: allows users with specific permissions to upload images to the website and automatically generate thumbnails. Images can be used in articles (for example, selected using tinymce editing tool) or as a simple network album. "> 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 /',);

 
Method 3: use the original manage_file and js to achieve direct Upload without clicking the upload button:

The above two methods can achieve no refreshing upload, but the interface is not friendly. You need to click the upload button to trigger the upload. We do not want to have the upload button more often, the following method can be used:

File: auto_upload.info

Name = Auto Uploaddescription = Removes the need for users to press the 'upload' button for AJAX file uploads. core = 7. xdependencies [] = file

File: auto_upload.js:

(Function ($) {Drupal. behaviors. autoUpload = {attach: function (<a href = "/project/context" class = "alinks-link" title = "module introduction: that is, "display" some blocks "according to certain conditions"> context </a>, 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 ');}

We can also optimize it to display thumbnails when uploading images:

<? 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 ['components'] ['type']) {case 'multifield _ base_widg Et ': $ 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 thu Mbnail. */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. = ' 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}?>

Method 4: use a third-party module

Another method is simple and direct, that is, using a third-party module, such as the Drag & Drop Upload module, can achieve no refreshing Upload, and supports Drag and Drop, which is quite good.