用wordpress自带的媒体中心上传图片

在主题和插件开发中我们经常希望用户能再前端上传图片,例如上传头像、投稿等功能都涉及到图片上传,wordpress自带的媒体中心具有便捷的附件或图片上传功能,下面就分享给大家简单的前端图片上传功能

注意:需要主题或者插件已经引入jquery,否者无效

1、在需要调用到上传图片页面的地步引入一下代码:

  1. <?php wp_enqueue_media();?>
  2. <script>
  3. jQuery(document).ready(function(){
  4. var upload_frame;
  5. var value_id;
  6. jQuery('.upload_button').on('click',function(e){
  7. value_id =jQuery( this ).attr('id');
  8. event.preventDefault();
  9. if( upload_frame ){
  10. upload_frame.open();
  11. return;
  12. }
  13. upload_frame = wp.media({
  14. title: '插入图片',
  15. button: {
  16. text: '插入',
  17. },
  18. multiple: false
  19. });
  20. upload_frame.on('select',function(){ //里面是选择图片后的动作,把图片地址赋值给input
  21. attachment = upload_frame.state().get('selection').first().toJSON();
  22. jQuery('input[name='+value_id+']').val(attachment.url);
  23. });
  24. upload_frame.open();
  25. });
  26. });
  27. </script>

2、在需要上传图片的位置引入一下代码:

  1. <input type="text" size="60" value="" name="upload" id="upload"/>
  2. <a id="upload" class="upload_button button" href="#">上传</a>
建站教程

DUX主题文章列表添加广告位

2019-8-28 12:04:38

建站教程

给wordpress文章图片添加Auto-highslide灯箱预览效果

2019-8-28 13:06:16

本站所发布的一切源码、模板、应用等文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。如有侵权。本站内容适用于DMCA政策。若您的权利被侵害,请与我们联系处理,站长 QQ: 84087680 或 点击右侧 私信:盾给网 反馈,我们将尽快处理。
⚠️
本站所发布的一切源码、模板、应用等文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。如有侵权。本站内容适用于DMCA政策
若您的权利被侵害,请与我们联系处理,站长 QQ: 84087680 或 点击右侧 私信:盾给网 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
欢迎您,新朋友,感谢参与互动!
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
私信列表
搜索