wordpress网站自定义字段(6)：给自定义面版添加上传图片

通过前面几章的介绍，我们可以看到，WordPress自定义字段的功能是非常强大的，在我们开发WordPress主题时，合理的应用wordpress自定义字段，以我们创作的wordpress主题功能提升是非常用帮助的。本章我们再来介绍如何在wordpress自定义面版中添加图片上传功能。

其实在wordpress文章发表页，wordpress就自带有图片上传按钮——“添加媒体”，所以，在文章发表页基本上不需要再添加这个wordpress自定义面版的图片上传模块。但是在我们制作wordpress主题自定义PAGE页面时，就可能会用到这个。下面，就一起来看看怎样添加wordpress自定义面版图片上传功能吧。

1、接上一章，在metabox.php文件中的二维数组中添加“图片上传”这一项，代码如下：

"uploads" => array(
"name" => "_meta_uploader",
"std" => '',
"title" => "图片上传",
"type"=>"uploader"),

2、然后在metabox.php文件中的switch判断语句中添加图片上传显示代码，代码如下：

//图片上传
case 'uploader':
echo'<h4>'.$meta_box['title'].'</h4>';
if($meta_box['std'] != ''){
echo '<span id="'.$meta_box['name'].'_value_img"><img src='.$meta_box['std'].' alt="" /></span>';}
echo '<input class="ashu_upload_input" type="text" size="40" value="'.$meta_box['std'].'" name="'.$meta_box['name'].'_value"/>';
echo '<input type="button" value="上传" class="ashu_bottom"/>';
echo '<br/>';
break;

3、通过js代码来实现图片上传功能。上面这些代码，只能调到上传图片上传的对话框，但是，点击上传按钮时是没有任何反应的，也就是说还不能实现图片上传，更不能实现实时预览。所以我们需要添加一个js文件，来实现这种功能。在主题文件夹下创建一个js文件夹，然后再在js文件夹里创建一个名为metabox_up.js的js文件，通过dreamweaver打开这个metabox_up.js，在里添加如下代码：

jQuery(document).ready(function() {
jQuery('input.ashu_bottom').click(function() {
custom_editor = true;
targetfield = jQuery(this).prev('input');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
window.original_send_to_editor = window.send_to_editor;
window.send_to_editor = function(html) {
if (custom_editor) {
imgurl = jQuery('img',html).attr('src');
jQuery(targetfield).val(imgurl).focus();
custom_editor = false;
tb_remove();
}else{
window.original_send_to_editor(html);
}
}
return false;
});
//图片实时预览ashu_upload_input为图片url文本框的class属性
jQuery('input.ashu_upload_input').each(function()
{
jQuery(this).bind('change focus blur', function()
{
//获取改文本框的name属性后面
$select = '#' + jQuery(this).attr('name') + '_img';
$value = jQuery(this).val();
$image = '<img src ="'+$value+'" />';
var $image = jQuery($select).html('').append($image).find('img');
//set timeout because of safari
window.setTimeout(function()
{
if(parseInt($image.attr('width')) < 20)
{
jQuery($select).html('');
}
},500);
});
});
});

4、调用这个metabox_up.js文件。在metabox.php文件中添加如下代码来调用js文件：

wp_enqueue_script('metabox_up', get_template_directory_uri(). '/js/metabox_up.js');

到这里，给wordpress自定义面版添加图片上传功能就结束了。我们来浏览一下效果，如下图：