首页 / WordPress开发 / WordPress主题后台制作教程(十):图片上传实时预览

WordPress主题后台制作教程(十):图片上传实时预览

    • 珂李斯

    发布于

    by

    前面两篇教程中，我们已经添加了多个图片上传表单，然后还缺了个图片上传实时预览功能，有时候这个功能很有必要，比如…

    前面两篇教程中，我们已经添加了多个图片上传表单，然后还缺了个图片上传实时预览功能，有时候这个功能很有必要，比如图片插入是否成功？插入是否正确？

    所以今天这篇教程我们给上一篇教程中添加的图片上传项添加一个图片预览。本篇教程沿用的代码还是前两篇的代码，请先参考前两篇教程：wordpress主题后台教程(九):多个图片上传表单      wordpress主题后台制作(八):图片上传

    首先我们给表单添加一个图片显示的div容器。修改类的display()函数为(我是写这个教程也是同时测试代码的可用性，所以有些地方不完美，这里又给所有上传图片的url文本框加了一个class属性，以便后面js获取改对象，同时预览图片的span标签中的class属性值为对应的文本框name值后面加上_img)：

    1.  function display() {   
    2.         //加载upload.js文件   
    3.         wp_enqueue_script(‘my-upload’, get_bloginfo( ‘stylesheet_directory’ ) . ‘/js/upload.js’);   
    4.         //加载上传图片的js(wp自带)   
    5.         wp_enqueue_script(‘thickbox’);   
    6.         //加载css(wp自带)   
    7.         wp_enqueue_style(‘thickbox’);   
    8.         $options = ClassicOptions::getOptions(); ?>         
    9.         <form method=“post” enctype=“multipart/form-data” name=“classic_form” id=“classic_form”>         
    10.         <div class=“wrap”>         
    11.         <h2><?php _e(‘阿树工作室主题设置’); ?></h2>   
    12.         <p>   
    13.         <?php //添加预览图片代码   
    14.         if($options[‘ashu_logo’] != ”){   
    15.             echo ‘<span class=“ashu_logo_img”><img src=’.$options[‘ashu_logo’].’ alt=“” /></span>’;   
    16.         }   
    17.         ?>   
    18.         <label>   
    19.             <input type=“text” size=“80” class=“ashu_upload_input” name=“ashu_logo” id=“ashu_logo” value=“<?php echo($options[‘ashu_logo’]); ?>”/>   
    20.             <input type=“button” value=“上传” class=“ashu_bottom”/>   
    21.         </label>   
    22.         </p>   
    23.         <p>   
    24.         <?php //添加预览图片代码   
    25.         if($options[‘ashu_ico’] != ”){   
    26.             echo ‘<span class=“ashu_ico_img”><img src=’.$options[‘ashu_ico’].’ alt=“” /></span>’;   
    27.         }   
    28.         ?>   
    29.         <label>   
    30.             <input type=“text” size=“80” class=“ashu_upload_input” name=“ashu_ico” id=“ashu_ico” value=“<?php echo($options[‘ashu_ico’]); ?>”/>   
    31.             <input type=“button” value=“上传” class=“ashu_bottom”/>   
    32.         </label>   
    33.         </p>           
    34.         <p class=“submit”>    
    35.             <input type=“submit” name=“classic_save” value=“<?php _e(‘保存设置’); ?>” />         
    36.         </p>         
    37.     </div>         
    38. </form>         
    39. <?php         
    40.     }  

    此时请参考效果(途中下载速度是浮云。。)：

    wordperss后台上传预览图片

    不过这里还有个不完美的地方，就是不能实时更新预览图，比如上传了新图片，或者手动修改了url地址，预览图并不会改变，我们通过我们的js代码来监控文本框中url值的变化。然后实时改变预览图片。修改后的js代码为：

    1. jQuery(document).ready(function() {   
    2.     //查找class为ashu_bottom的对象   
    3.     jQuery(‘input.ashu_bottom’).click(function() {   
    4.         //获取它前面的一个兄弟元素   
    5.          targetfield = jQuery(this).prev(‘input’);   
    6.          tb_show(”, ‘media-upload.php?type=image&amp;TB_iframe=true‘);   
    7.          return false;   
    8.     });   
    9.     
    10.     window.send_to_editor = function(html) {   
    11.          imgurl = jQuery(‘img’,html).attr(‘src’);   
    12.          jQuery(targetfield).val(imgurl).focus(); //添加获得焦点函数   
    13.          tb_remove();   
    14.     }   
    15.        
    16.     //图片实时预览ashu_upload_input为图片url文本框的class属性   
    17.     jQuery(‘input.ashu_upload_input’).each(function()   
    18.     {   
    19.         jQuery(this).bind(‘change focus blur’, function()   
    20.         {      
    21.             //获取改文本框的name属性后面   
    22.             $select = ‘#’ + jQuery(this).attr(‘name’) + ‘_img’;   
    23.             $value = jQuery(this).val();   
    24.             $image = ‘<img src =“‘+$value+’” />’;   
    25.                            
    26.             var $image = jQuery($select).html(”).append($image).find(‘img’);   
    27.                
    28.             //set timeout because of safari   
    29.             window.setTimeout(function()   
    30.             {   
    31.                 if(parseInt($image.attr(‘width’)) < 20)   
    32.                 {      
    33.                     jQuery($select).html(”);   
    34.                 }   
    35.             },500);   
    36.         });   
    37.     });   
    38.     
    39. });   

    注意：预览图片的span标签中的class属性值为对应的文本框name值后面加上_img

    就这样，完工了

    类别：WordPress开发、

    本文收集自互联网，转载请注明来源。
    如有侵权，请联系 wper_net@163.com 删除。

    【上一篇】:

    【下一篇】:

    猜你喜欢GUESS YOU LIKE

    评论 (0)COMMENT

    登录 账号发表你的看法，还没有账号？立即免费 注册


  • 还没有任何评论，赶紧来占个楼吧！