WordPress Backstage in the implementation of the picture upload function examples to explain _php example

Picture upload

File preparation: New PHP file, I use the default theme twenty ten to test, first in the folder under this topic to create a new file-myfunctions.php and then open functions.php file at the bottom add the following code to load our new file:

Include_once (' myfunctions.php '); 

The code for the class is as follows:

<?php//Classes Classicoptions class Classicoptions {/*-getoptions function Get option Group-*/function getoptions () {   
    Gets the option group in the database $options = get_option (' classic_options '); If the option group does not exist in the database, set the default values for these options and insert them into the database if (!is_array ($options)) {//initial default data $options [' Ashu_copy_ri  
        
      Ght '] = ' o tree Studio ';   
    Here you can add more Settings options update_option (' classic_options ', $options);  
  //Return $options of option group; /*--init function Initialization--*/function init () {//If it is POST submission data, restrict the data and update to the database if (isset $_post[' Clas   
      Sic_save ']) {//Get option group, because it is possible to modify only some of the options, so take it down and make the change $options = Classicoptions::getoptions ();   
        
      Data processing $options [' ashu_copy_right '] = stripslashes ($_post[' ashu_copy_right ']);   
      
    In this append other options to the limit processing//Updating data update_option (' classic_options ', $options); else {//otherwise, get the option group again, that is, initialize the data classicoptioNs::getoptions (); //Add Settings page add_theme_page ("Theme Settings", "Theme Settings", ' Edit_themes ', basename (__file__), Array (' classicoptions ', ' d   
  Isplay ')); }/*-label page-*/function display () {$options = Classicoptions::getoptions ();?> <form met   
    Hod= "POST" enctype= "Multipart/form-data" name= "Classic_form" id= "Classic_form" > <div class= "wrap" >  

After looking at our background Settings page, look at the effect I added after the map:

At this point the text field and the upload button already have, but the click still has no effect. In order to click after 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, create a new folder JS then, add a new Upload.js file in this file. Add JS Code:

jquery (document). Ready (function () {  
  //upbottom is the ID of the upload button  
  jQuery (' #upbottom '). Click (function () {  
    //ashu _logo is a 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 of JS and CSS.
Add the following code to the display () function in the class above:

Load Upload.js file  
    wp_enqueue_script (' My-upload ', Get_bloginfo (' stylesheet_directory '). '/js/upload.js ');  
    Upload the image of JS (WP with)  
    wp_enqueue_script (' Thickbox ');  
    Load CSS (WP self band)  
    Wp_enqueue_style (' Thickbox '); 

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

Well, you can try it out:

multiple pictures upload Forms
First we modify the form, add multiple upload buttons, plus a div container for displaying the picture.
The JS code in the tutorial above is to get the element by the ID value of the text field. If there are more than one file upload form, but in an HTML document ID can not be the same, in that case, you have to write a JS for each form, this is very cumbersome, so today we modify the form, And the JS is changed to get the object through class.

Modify the display () function in the class to (I add a new Ashu_ico entry and remove 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 image of JS (WP with) wp_enqueue_script (' Thickbox ');  
    Load CSS (WP self band) Wp_enqueue_style (' Thickbox '); $options = Classicoptions::getoptions ();?> <form method= "POST" enctype= "Multipart/form-data" name= "classic" _form "id=" Classic_form "> <div class=" wrap ">  

Here a new set of settings, the previous default data settings, data updates need to add 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 for:

jquery (document). Ready (function () {  
  //Lookup Object  
  jquery (' Input.ashu_bottom ') with class as 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 achieved, in fact, is also very simple.