WordPress Backstage in the implementation of the image upload function example to explain _php instances

image Upload

File preparation: New PHP file, I use the default theme twenty ten to test, first create a new file under the theme folder-myfunctions.php and then open the functions.php file at the bottom of the Add the following code to load the new file we created:

The code for the class is as follows:

<?php//Class Classicoptions class Classicoptions {/*--getoptions function Get option Group-*/function GetOptions () {//       Get the option group in the database $options = get_option (' classic_options '); If the option group does not exist in the database, set default values for these options and insert them into the database if (!is_array ($options)) {//initial default data $options [' Ashu_copy_right                ' = ' a tree studio ';       Here you can add more Settings options update_option (' classic_options ', $options);    }//Return option group return $options; }/*--init function Initialization--*/function init () {//) if POST data is submitted, restrict data and update to database if (isset ($_post[' classic_         Save ']) {//Get the option group, because it is possible to modify only some of the options, so the whole take down and then make changes $options = Classicoptions::getoptions ();                 Data processing $options [' ashu_copy_right '] = stripslashes ($_post[' ashu_copy_right ');             In this additional option the limit processing//Update data update_option (' classic_options ', $options);       } else {//Otherwise, retrieve the option group, which is the initialization of the data classicoptions::getoptions ();           } Add Settings page add_theme_page ("Theme Settings", "Theme Settings", ' Edit_themes ', basename (__file__), Array (' classicoptions ', ' Display '));     }/*--Label page-*/function display () {$options = Classicoptions::getoptions ();?> <?php    }}/* Initialize, execute the init function of the Classicoptions class */add_action (' Admin_menu ', Array (' classicoptions ', ' init '));   ?>

Then check out our background Settings page to see what I added after:

Now that the text field and the upload button are there, there is no effect on the click. In order to click on the upload frame, we also need to add JS code.

For ease of management, we create a new JS file, under the Twentyten theme folder to create a new folder JS then, in this file add a new Upload.js file. Add JS Code:

jquery (document). Ready (function () {    //upbottom is the ID of the upload button    jQuery (' #upbottom '). Click (function () {      //ashu _logo is the text field       Targetfield = JQuery (this). Prev (' #ashu_logo ');       Tb_show (', ' media-upload.php?type=image&tb_iframe=true ');       return false;    });      Window.send_to_editor = function (html) {       Imgurl = jQuery (' img ', HTML). attr (' src ');       JQuery (Targetfield). Val (imgurl);       Tb_remove ();    }    

Here is the loading JS and CSS.
In the class above, add the following code in the display () function:

Load Upload.js file      wp_enqueue_script (' My-upload ', Get_bloginfo (' stylesheet_directory '). '/js/upload.js ');      Upload the uploaded image js (wp comes with)      wp_enqueue_script (' Thickbox ');      Load CSS (WP comes with)      

Then if you look at the background Settings page source code, in the source of the approximate last location can see you loaded this JS file.

OK, you can try it out:

Multiple picture upload forms
First we modify the form, add multiple upload buttons, plus a div container for displaying the image.
The above tutorial in the JS code is the ID value of the text field to get the element, if there are multiple file upload form, but in an HTML document ID can not be the same, then you have to write a JS for each form, this is cumbersome, so today we modify the form, and change JS to get the object by class.

Modify the display () function in the class to (I added a new Ashu_ico entry and change the id attribute of the upload button to class= "Ashu_bottom"):

function display () {      //load Upload.js file      wp_enqueue_script (' My-upload ', Get_bloginfo (' stylesheet_directory '). '/js/upload.js ');      Upload the uploaded image js (wp comes with)      wp_enqueue_script (' Thickbox ');      Load CSS (WP comes with)      Wp_enqueue_style (' Thickbox ');      $options = Classicoptions::getoptions ();?>              <?php       

Here a new set of items, the previous default data settings, data updates are required to increase the corresponding items, very simple, here do not repeat.

And look at the new JS code, with the editor to open our upload.js, modify the code to:

jquery (document). Ready (function () {    //Find the object of class Ashu_bottom    jQuery (' Input.ashu_bottom '). Click ( function () {      //Get a sibling element in front of it       Targetfield = JQuery (this). Prev (' input ');       Tb_show (', ' media-upload.php?type=image&tb_iframe=true ');       return false;    });      Window.send_to_editor = function (html) {       Imgurl = jQuery (' img ', HTML). attr (' src ');       JQuery (Targetfield). Val (imgurl);       Tb_remove ();    }    });  

To this multiple image upload has been implemented, in fact, it is very simple.

