wordpress CMS主题 微信
  • 全部教程
  • Home > wordpress CMS主题制作 > 为wordpressCMS主题设置页面添加图片上传(3):图片上传显示预览图片

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

    高时银博客 wordpress CMS主题制作 点击: 1,002 次 0 1

    通过前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
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    目前还没有评论。赶快来坐沙发吧。

    发表评论