dd

wordpress进阶教程(九):在自定义面板中添加图片上传功能


通过自定义字段给文章添加一些附属图片什么的,应用很广,一般技术不到位的,会使用自定义字段填写图片url来实现,那样虽然实现了,但是非常不方便,我们要的是不经能直接填写图片url,而且能直接上传,并且要能够实时预览。其实理论很简单,跟我们后台教程中添加图片上传功能基本一样,可参考:wordpress主题后台制作(八):图片上传。

OK,我们还是沿用上一篇教程中的代码,并且直接在上一篇教程中添加图片上传功能:

首先打开我们的metabox.php文件,在配置数组中添加一项:

"uploads" => array(            "name" => "_meta_uploader",            "std" => '',               "title" => "图片上传",            "type"=>"uploader"),   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;   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&amp;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);               });           });               });   wp_enqueue_script('kriesi_custom_fields_js', get_template_directory_uri(). '/js/metaup.js');   <?php    $new_meta_boxes =     array(        "title" => array(            "name" => "_meta_title",            "std" => "",            "title" => "标题",            "type"=>"title"),                 "keywords" => array(            "name" => "_meta_keywords",            "std" => "",               "title" => "关键字",            "type"=>"text"),                    "description" => array(            "name" => "_meta_description",            "std" => "",               "title" => "描述%

 第二步:在函数new_meta_boxes中的switch语句中添加一项即可,其实我们直接将后台教程中提到的上传代码复制过来即可用:

"uploads" => array(            "name" => "_meta_uploader",            "std" => '',               "title" => "图片上传",            "type"=>"uploader"),   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;   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&amp;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);               });           });               });   wp_enqueue_script('kriesi_custom_fields_js', get_template_directory_uri(). '/js/metaup.js');   <?php    $new_meta_boxes =     array(        "title" => array(            "name" => "_meta_title",            "std" => "",            "title" => "标题",            "type"=>"title"),                 "keywords" => array(            "name" => "_meta_keywords",            "std" => "",               "title" => "关键字",            "type"=>"text"),                    "description" => array(            "name" => "_meta_description",            "std" => "",               "title" => "描述%

 第三步:加载js,要知道,如果仅仅加这个代码,虽然你能够调取到上传图片上传的对话框,但是还不能将图片url插入到文本域中,更不能实现实时预览。所以我们需要添加一个js文件,比如我沿用以前的,在twenty ten主题中新建一个js文件夹,在里面加你一个名为metaup.js的js文件,该js文件中的代码为:

"uploads" => array(            "name" => "_meta_uploader",            "std" => '',               "title" => "图片上传",            "type"=>"uploader"),   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;   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&amp;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);               });           });               });   wp_enqueue_script('kriesi_custom_fields_js', get_template_directory_uri(). '/js/metaup.js');   <?php    $new_meta_boxes =     array(        "title" => array(            "name" => "_meta_title",            "std" => "",            "title" => "标题",            "type"=>"title"),                 "keywords" => array(            "name" => "_meta_keywords",            "std" => "",               "title" => "关键字",            "type"=>"text"),                    "description" => array(            "name" => "_meta_description",            "std" => "",               "title" => "描述%

第四步:加载js文件,在metabox.php文件的函数中(请注意是在该函数中,不在switch语句的外面,或者你也可以直接放在这个文件中,不放在任何函数里面)添加以下代码:

"uploads" => array(            "name" => "_meta_uploader",            "std" => '',               "title" => "图片上传",            "type"=>"uploader"),   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;   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&amp;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);               });           });               });   wp_enqueue_script('kriesi_custom_fields_js', get_template_directory_uri(). '/js/metaup.js');   <?php    $new_meta_boxes =     array(        "title" => array(            "name" => "_meta_title",            "std" => "",            "title" => "标题",            "type"=>"title"),                 "keywords" => array(            "name" => "_meta_keywords",            "std" => "",               "title" => "关键字",            "type"=>"text"),                    "description" => array(            "name" => "_meta_description",            "std" => "",               "title" => "描述%

这样就完成了,效果图:

wordpress自定义面板中添加图片上传功能

调用方法请参考上一篇文章。

好了,为了方便懒人使用,将现在的metabox.php中的代码全部贴出,注意现在添加js文件才能使用哦。

"uploads" => array(            "name" => "_meta_uploader",            "std" => '',               "title" => "图片上传",            "type"=>"uploader"),   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;   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&amp;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);               });           });               });   wp_enqueue_script('kriesi_custom_fields_js', get_template_directory_uri(). '/js/metaup.js');   <?php    $new_meta_boxes =     array(        "title" => array(            "name" => "_meta_title",            "std" => "",            "title" => "标题",            "type"=>"title"),                 "keywords" => array(            "name" => "_meta_keywords",            "std" => "",               "title" => "关键字",            "type"=>"text"),                    "description" => array(            "name" => "_meta_description",            "std" => "",               "title" => "描述%