• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > wordpress CMS主题制作 > 为wordpressCMS主题设置页面添加图片上传(3):图片上传显示预览图片

    为wordpressCMS主题设置页面添加图片上传(3):图片上传显示预览图片

    作者: 分类:wordpress CMS主题制作 点击: 1,814 次
    wordpress CMS主题:ssmay主题

      通过前2章的相关代码,我们为wordpressCMS主题添加了图片上传设置页面,但是,在我们上传图片并保存后,在设置页面看不到图片的预览效果,在第一次使用也没什么问题,但是在我们后台的使用中,我们可能不知道我们第一次上传的图片是个什么样的图片,我们可能只能打开前台页面才知道是什么图片,这样一来,有点麻烦,如果在上传图片保存后,可以在上传按钮右侧显示个预览图片就比较方便了。本章,就来解说如可添加预览图片。

      为wordpressCMS主题设置页面添加图片上传(3):图片上传显示预览图片

      第一步:修改图片上传代码。

      因为在前面的图片上传代码中没有预览图片代码,所以我们要添加代码,并且要将原图片上传代码要做相应的修改,代码如下:

      <h2>wanlimm主题设置</h2>
      <p>
      <label>
      <input type="text" size="80" class="wanlimm_logo" name="wanlimm_logo" id="wanlimm_logo" value="<?php echo($options['wanlimm_logo']); ?>"/>
      <input type="button" value="上传" class="wanlimm_bottom"/>
      </label>
      <?php //添加预览图片代码
      if($options['ashu_logo'] != ''){
      echo '<span class="wanlimm_img"><img src='.$options['wanlimm_logo'].' alt="" width="75" height="100"/></span>';
      }
      ?>
      </p>
      <p>
      <label>
      <input type="text" size="80" class="wanlimm_ico" name="wanlimm_ico" id="wanlimm_ico" value="<?php echo($options['wanlimm_ico']); ?>"/>
      <input type="button" value="上传" class="wanlimm_bottom"/>
      </label>
      <?php //添加预览图片代码
      if($options['ashu_logo'] != ''){
      echo '<span class="wanlimm_img"><img src='.$options['wanlimm_ico'].' alt="" width="75" height="100"/></span>';
      }
      ?>
      </p>

      上面的代码中,标蓝的代码是为图片上传代码添加的class属性,这个要在JS代码中用到的。标红的代码,就是图片预览图代码。

      第二步:修改upload.js文件代码。

      要想让预览图片显示出来,我们还要用到JS代码,在前面我们创建的upload.js代码中添加如下代码:

      //图片实时预览wanlimm_logo为图片url文本框的class属性
      jQuery('input.wanlimm_logo').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);
      });
      });

      然后,还要修改一下upload.php文件中的第二段代码,添加获得焦点函数 ,修改后的代码如下:

      window.send_to_editor = function(html) {
      imgurl = jQuery('img',html).attr('src');
      jQuery(targetfield).val(imgurl).focus(); //添加获得焦点函数
      tb_remove();
      }

      通过上面2步,我们就为wordpress图片上传添加了预览图片功能。效果如上图。

       

    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201506234508.html
    本文时间:2015-06-23 12:37:23
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.