首页 / WordPress开发 / WordPress主题后台教程(九):多个图片上传表单

WordPress主题后台教程(九):多个图片上传表单

    • 珂李斯

    发布于

    by

    本节教程需要再上一篇教程的基础上完成，请先准备好上一篇教程中的代码和js文件。本教程要实现的目标是后台能有多个…

    本节教程需要再上一篇教程的基础上完成，请先准备好上一篇教程中的代码和js文件。本教程要实现的目标是后台能有多个图片上传表单。

    首先我们修改表单，添加多个上传按钮，还加上显示图片用的div容器。

    上一篇教程中的js代码中是通过文本域的id值来获取元素的，如果有多个文件上传表单，但是在一个html文档中id不能相同，那样的话，就得针对每个表单都写一个js，这样很繁琐，所以今天我们修改一下表单，并且将js改成通过class获取对象。

    将类中的display()函数修改为(我新加了一个ashu_ico项，并且将上传按钮的id属性去掉改成class=”ashu_bottom”)：

    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.         <label>   
    14.             <input type=“text” size=“80”  name=“ashu_logo” id=“ashu_logo” value=“<?php echo($options[‘ashu_logo’]); ?>”/>   
    15.             <input type=“button” value=“上传” class=“ashu_bottom”/>   
    16.         </label>   
    17.         </p>   
    18.         <p>   
    19.         <label>   
    20.             <input type=“text” size=“80”  name=“ashu_ico” id=“ashu_ico” value=“<?php echo($options[‘ashu_ico’]); ?>”/>   
    21.             <input type=“button” value=“上传” class=“ashu_bottom”/>   
    22.         </label>   
    23.         </p>           
    24.         <p class=“submit”>    
    25.             <input type=“submit” name=“classic_save” value=“<?php _e(‘保存设置’); ?>” />         
    26.         </p>         
    27.     </div>         
    28. </form>         
    29. <?php         
    30.     }  

    这里新加了一个设置项，前面默认数据设置、数据更新都需要相应的增加项目，很简单，这里不赘述。

    且看新的js代码，用编辑器打开我们的upload.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);   
    13.          tb_remove();   
    14.     }   
    15.     
    16. });   

    到此多个图片上传已经实现，其实也很简单。。

    wordpress后台设置页面多个图片上传

    类别：WordPress开发、

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

    【上一篇】:

    【下一篇】:

    猜你喜欢GUESS YOU LIKE

    评论 (0)COMMENT

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


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