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

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

所以今天这篇教程我们给上一篇教程中添加的图片上传项添加一个图片预览。本篇教程沿用的代码还是前两篇的代码,请先参考前两篇教程: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

就这样,完工了

已有12条评论

  1. 高高
    高高 : 回复

    为什么保存后,第一个上传会显示图片和地址,而第二个上传在后台没有任何显示,但是在文件夹里可以找到这个图片。

  2. 斌果
    斌果 : 回复

    快告诉我你的下载速度是ps的,否则我就撞墙自尽、、、、

  3. 记忆碎片
    记忆碎片 : 回复

    用了你这个教程 前台用<?php echo($options[‘ashu_logo’]); ?>调用 调用失败 用<?php echo $options = ClassicOptions::getOptions(); echo $options[‘ashu_logo’]; ?>这个调用 能输出内容 但是输出的地址前面带了array 如arrayphttp://www.1.com/1.jpg 不知道怎么解决

    • 阿树工作室
      阿树工作室 回复记忆碎片: 回复

      首先肯定要用$options = ClassicOptions::getOptions(); 来获取设置选项,然后在输出: echo $options[‘ashu_logo’];   你出现这个问题,是因为你最前面多了个echo

  4. 潘兄
    潘兄 : 回复

     $select = ‘#’ + jQuery(this).attr(‘name’) + ‘_img’;

    这段代码写错了。是 $select = ‘.’ + jQuery(this).attr(‘name’) + ‘_img’;  

  5. 冰手女孩
    冰手女孩 : 回复

    请问怎么调用出上传的图片呢?

  6. xuefeng3600
    xuefeng3600 : 回复

    嗯,确实是这样子,谢了啊!在你的网站学到了不少知识!还有个问题就是后台我只能显示一张预览图,在第二个输入框上传图片的时候就不显示了,点击保存设置那个按钮,第二个输入框的url 也消失!我试着调用ClassicOptions::getOptions();  ?> <img src=”<?php echo $options[‘ashu_ico’] ?>”> 调用不了,  ClassicOptions::getOptions();  ?> <img src=”<?php echo $options[‘ashu_logo’] ?>”>这个就可以 完全正常显示!

    • 阿树工作室
      阿树工作室 回复xuefeng3600: 回复

      这个你应该分析js代码。。。。或者继续看下面的教程。。。你的网站设计不错看我可以copy吗。。

      • xuefeng3600
        xuefeng3600 回复阿树工作室: 回复

        可以了,原来  if(isset($_POST[‘classic_save’])){}  里面忘了加上    

        $options[‘ashu_ico’] = stripslashes($_POST[‘ashu_ico’]); 

        添加上就可以了!

      • xuefeng3600
        xuefeng3600 回复阿树工作室: 回复

        哦,好吧,那我再检查下js!  可以啊,没问题!My pleasure

  7. xuefeng3600
    xuefeng3600 : 回复

    不好意思! 之前在教程(9)留错地方了,应该是在这篇留言才对的,用了你给的那个调用函数$options = ClassicOptions::getOptions(); echo $options[‘ashu_logo’];

    可以调用了,不过貌似只能调用图片的URL,还得嵌到 img 标签里面才能显示,不过貌似看了你的 js 好像可以不用签到img 标签里面的吧? 我js 也正常加载了!求助~

    • 阿树工作室
      阿树工作室 回复xuefeng3600: 回复

      保存的设置数据本来就是图片url。。。要显示图片把url嵌到 img 标签里面,这很正确也很正常啊。。我的js里面也是先获取url再弄到img标签里面

发表评论