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

您现在的位置:阿树工作室->wordpress主题教程->后台制作教程  2012.8.16标签: ,   浏览数:14,356

本节教程需要再上一篇教程的基础上完成，请先准备好上一篇教程中的代码和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主题定制,制作教程（wordpress主题定制-阿树工作室）

本篇教程之前的几篇教程是

本篇教程之后的几篇教程是

没有找到你要找的内容？你可以通过搜索你要找的内容，或者给我们留言。

已有14条评论

  1. pavols
    pavols : 回复 2016-10-08 10:52

    上传图片的位置怎么改？

  2. 小马
    小马 : 回复 2014-08-20 20:23

    这边也是编辑器一块使用会有一些冲突。。不知道怎么解决。。。

  3. 校长
    校长 : 回复 2014-04-06 13:18

    树哥！你网站上面的下载 在最近确实出现了很多的问题！用chrome下载的压缩包 点无法打开！IE也无法下载正确的内容！请您调整下！对你站点的内容依赖是非常非常大的！如果您方便我很希望您能把这些文件传给我一份作！我感激不尽！                                                                                                                                                                                                                                                           

  4. airlqin
    airlqin : 回复 2013-08-03 14:11

    选择通过URL上传，为什么一定要填最后的那个选项“将图像链接到”才能成功？

  5. airlqin
    airlqin : 回复 2013-08-02 15:28

    通过URL上传，为什么一定要填最后的那个选项“将图像链接到”才能成功？

  6. airlqin
    airlqin : 回复 2013-08-01 12:09

    通过URL上传，为什么一定要填最后的那个选项“将图像链接到”才能成功？

  7. 啊喵
    啊喵 : 回复 2013-06-12 22:57

    求救！！我把2篇文章的代码整合到了一起，刷新后，出现了2个上传图片的按钮，好兴奋，可是点击保存后，只有第一个框有图片地址，第二个框的图片地址就消失了。。。

    代码和js都是用博主的。。。求教是什么问题呢?能不能麻烦博主，把2篇文章的代码再整合到一起，让菜鸟们可以顺利简单的使用呢。谢谢了

    • 阿树工作室
      阿树工作室 回复啊喵: 回复 2013-06-13 08:15

      如果要简单方便的使用。。请参考本站提供的类文件。。。wordpress后台制作教程-设置选项类文件

      • 阿树工作室
        阿树工作室 回复阿树工作室: 回复 2013-06-13 22:03

        编辑器的添加请参考：http://www.ashuwp.com/courses/highgrade/277.html

      • 啊喵
        啊喵 回复阿树工作室: 回复 2013-06-13 13:25

        其实不是简单的使用额，因为我把网上的幻灯片集成到自己的主题中，而幻灯片又需要上传好几张图片，结果弄出了5个上传图片的框，但结果就是点击保存后，只有第一个框有值，其他4个就变成空白了。。。

        ps:找了一下后台添加菜单的教程，貌似没有后台插入tinymce编辑器的教程，老大可否考虑做一个呢？就是这个http://www.ashuwp.com/imguploads/2012/08/alloption.png

        里面有了大多数的功能，但是缺少了一个tinymce编辑框。谢谢

        • 阿树工作室
          阿树工作室 回复啊喵: 回复 2013-06-13 17:05

          亲。。使用本工作室提供的类文件。。。。你想怎么添加就怎么添加。。。

          • 阿喵
            阿喵 回复阿树工作室: 回复 2013-06-13 20:45

            阿树大哥，我还想问问后台插入编辑器的代码是什么呢？如图http://ww1.sinaimg.cn/large/9ed5c127jw1e5msdy4tddj20la0c8jsm.jpg

            这样你那个类文件就齐全啦。

  8. xuefeng3600
    xuefeng3600 : 回复 2012-11-15 21:33

    可以实现上传预览了，请问一下如何调用，在前台显示不出来？

    • 阿树工作室
      阿树工作室 回复xuefeng3600: 回复 2012-11-15 21:45

      额。。你留言在这个多图上传文章里，你用的代码是上一篇的吗？
      如果是的话，请使用： $options = ClassicOptions::getOptions(); echo $options[‘ashu_logo’]; 这样来调用数据。。

发表评论