Image upload
File preparation: Create a new php file. I used the default theme Twenty Ten to test. First, create a new file-myfunctions.php in the folder of this theme. Then open the functions.php file and add the following code at the bottom to load us. Create this new file:
include_once('myfunctions.php');
class is as follows:
<?php
//类ClassicOptions
class ClassicOptions {
/* -- getOptions函数获取选项组 -- */
function getOptions() {
// 在数据库中获取选项组
$options = get_option('classic_options');
// 如果数据库中不存在该选项组, 设定这些选项的默认值, 并将它们插入数据库
if (!is_array($options)) {
//初始默认数据
$options['ashu_copy_right'] = '阿树工作室';
//这里可添加更多设置选项
update_option('classic_options', $options);
}
// 返回选项组
return $options;
}
/* -- init函数 初始化 -- */
function init() {
// 如果是 POST 提交数据, 对数据进行限制, 并更新到数据库
if(isset($_POST['classic_save'])) {
// 获取选项组, 因为有可能只修改部分选项, 所以先整个拿下来再进行更改
$options = ClassicOptions::getOptions();
// 数据处理
$options['ashu_copy_right'] = stripslashes($_POST['ashu_copy_right']);
//在这追加其他选项的限制处理
// 更新数据
update_option('classic_options', $options);
} else {
// 否则, 重新获取选项组, 也就是对数据进行初始化
ClassicOptions::getOptions();
}
//添加设置页面
add_theme_page("主题设置", "主题设置", 'edit_themes', basename(__FILE__), array('ClassicOptions', 'display'));
}
/* -- 标签页 -- */
function display() {
$options = ClassicOptions::getOptions(); ?>
<form method="post" enctype="multipart/form-data" name="classic_form" id="classic_form">
<div class="wrap">
<h2><?php _e('阿树工作室主题设置', 'classic'); ?></h2>
<!-- 设置内容 -->
<table class="form-table">
<tbody>
<tr valign="top">
<td>
<label>
<input type="text" name="ashu_copy_right" value="<?php echo($options['ashu_copy_right']); ?>" size="20"/><?php _e('阿树工作室版权文字');?>
</label>
</td>
</tr>
</tbody>
</table>
<!-- TODO: 在这里追加其他选项内容 -->
<p class="submit">
<input type="submit" name="classic_save" value="<?php _e('保存设置'); ?>" />
</p>
</div>
</form>
<?php
}
}
/*初始化，执行ClassicOptions类的init函数*/
add_action('admin_menu', array('ClassicOptions', 'init'));
?>
Check our backend settings page later and take a look at the renderings after I added it:
At this point, the text field and upload button are already there, but clicking them still has no effect. In order to pop up the upload frame after clicking, we also need to add js code.
In order to facilitate management, we create a new js file, create a new folder js under the twentyten theme folder, and then add a new upload.js file under this file. Add js code:
jQuery(document).ready(function() {
//upbottom为上传按钮的id
jQuery('#upbottom').click(function() {
//ashu_logo为文本域
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 next step is to load js and css.
Add the following code to the display() function in the above class:
//加载upload.js文件
wp_enqueue_script('my-upload', get_bloginfo( 'stylesheet_directory' ) . '/js/upload.js');
//加载上传图片的js(wp自带)
wp_enqueue_script('thickbox');
//加载css(wp自带)
wp_enqueue_style('thickbox');
If you view the source code of the background settings page later, you can see the js file you loaded at approximately the end of the source code.
Okay, you can try it out:
Multiple image upload form
First we modify the form, add multiple upload buttons, and add a div container for displaying images.
The js code in the above tutorial obtains elements through the id value of the text field. If there are multiple file upload forms, but the id cannot be the same in an html document, in that case, you have to write a js for each form. , this is very tedious, so today we modify the form and change the js to obtain the object through class.
Modify the display() function in the class to (I added a new ashu_ico item, and removed the id attribute of the upload button and changed it to class="ashu_bottom"):
function display() {
//加载upload.js文件
wp_enqueue_script('my-upload', get_bloginfo( 'stylesheet_directory' ) . '/js/upload.js');
//加载上传图片的js(wp自带)
wp_enqueue_script('thickbox');
//加载css(wp自带)
wp_enqueue_style('thickbox');
$options = ClassicOptions::getOptions(); ?>
<form method="post" enctype="multipart/form-data" name="classic_form" id="classic_form">
<div class="wrap">
<h2><?php _e('阿树工作室主题设置'); ?></h2>
<p>
<label>
<input type="text" size="80" name="ashu_logo" id="ashu_logo" value="<?php echo($options['ashu_logo']); ?>"/>
<input type="button" value="上传" class="ashu_bottom"/>
</label>
</p>
<p>
<label>
<input type="text" size="80" name="ashu_ico" id="ashu_ico" value="<?php echo($options['ashu_ico']); ?>"/>
<input type="button" value="上传" class="ashu_bottom"/>
</label>
</p>
<p class="submit">
<input type="submit" name="classic_save" value="<?php _e('保存设置'); ?>" />
</p>
</div>
</form>
<?php
}
A new setting item is added here. The previous default data settings and data updates require corresponding additions. It is very simple and will not be described in detail here.
Let’s look at the new js code. Open our upload.js with an editor and modify the code to:
jQuery(document).ready(function() {
//查找class为ashu_bottom的对象
jQuery('input.ashu_bottom').click(function() {
//获取它前面的一个兄弟元素
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();
}
});
Up to this point, multiple image uploads have been implemented, and it is actually very simple. .
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
