Examples of implementing the image upload function in the WordPress background

This article describes how to implement the image upload function in the WordPress background, including the implementation of multiple image upload forms. For more information, see Upload images

File Preparation: Create a php file. I will use the default theme Twenty Ten for testing. First, create a file-myfunctions in the theme folder. php then open functions. add the following code at the bottom of the PHP file to load the new file:

include_once('myfunctions.php'); 

The class code is as follows:

<? Php // class ClassicOptions {/* -- getOptions function to obtain the limit group -- */function getOptions () {// Obtain the Sequence Group $ options = get_option ('classic _ options') in the database; // if the sequence group does not exist in the database, set the default values of these options, and insert them into the database if (! Is_array ($ options) {// initial default data $ options ['ashu _ copy_right '] = 'tree studio '; // Here you can add more setting options update_option ('classic _ options', $ options);} // return the response group return $ options ;} /* -- init function initialization -- */function init () {// if the data is submitted by POST, restrict the data, and update it to the database if (isset ($ _ POST ['classic _ save']) {// Obtain the sequence group, because only some options may be modified, so take the entire process and then change $ options = ClassicOptions: getOptions (); // data processing $ options ['ashu _ copy_right '] = stripslashes ($ _ POST ['ashu _ copy_right ']); // Append the restrictions of other options here. // update data update_option ('classic _ options', $ options );} else {// otherwise, re-obtain the category group, that is, initialize ClassicOptions: getOptions () ;}// add the add_theme_page ("topic settings ", "Topic settings", 'edit _ themes', basename (_ FILE _), array ('classicoptions ', 'display '));} /* -- tab -- */function display () {$ options = ClassicOptions: getOptions ();?> <? Php}/* initialize and execute the init function of the ClassicOptions class */add_action ('admin _ menu ', array ('classicoptions', 'init ');?>

Then you can view our background settings page and view the added:

Now the text field and upload button are available, but clicking it still does not work. To pop up the upload framework after clicking it, we also need to add js code.

To facilitate management, we create a new js file, create a folder js under the twentyten topic folder, and then add this file to create an upload. js file. Add js code:

JQuery (document ). ready (function () {// upbottom is the upload button id 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 ();}});

The following is how to load js and css.
In the above class, add the following code to the display () function:

// Load upload. js file wp_enqueue_script ('My-upload', get_bloginfo ('stylesheet _ directory '). '/js/upload. js '); // js (included in wp) for loading the uploaded image wp_enqueue_script ('thickbox'); // loading css (included in wp) wp_enqueue_style ('thickbox ');

Then, if you view the source code of the background settings page, you can see the js file you loaded at the end of the source code.

Okay, you can try it out:

Multiple image upload forms
First, modify the form, add multiple Upload buttons, and add the p container for displaying images.
In the js code in the above tutorial, elements are obtained through the id value of the text field. if there are multiple file upload forms, but the IDs in an html document cannot be the same, you have to write a JavaScript code for each form. this is very complicated. so today we need to modify the form and change js to get objects through class.

Modify the display () function in the class to (I added a new ashu_ico item and changed 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 '); // js (included in wp) for loading the uploaded image wp_enqueue_script ('thickbox'); // loading css (included in wp) wp_enqueue_style ('thickbox '); $ options = ClassicOptions: getOptions ();?> <? Php}

A new configuration item is added here. the default data settings and data updates above all need to be added accordingly, which is very simple and will not be described here.

Check the new js code, open upload. js in the editor, and modify the code:

JQuery (document ). ready (function () {// find the object jQuery ('input. ashu_bottom '). click (function () {// Obtain a sibling element targetfield = jQuery (this) before it ). 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 ();}});

It is actually quite easy to upload multiple images ..