欢迎光临
小清新博客

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

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

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

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

<?php wp_enqueue_media();?>
<script>   
jQuery(document).ready(function(){   
	var upload_frame;   
	var value_id;   
	jQuery('.upload_button').on('click',function(e){   
		value_id =jQuery( this ).attr('id');       
		event.preventDefault();   
		if( upload_frame ){   
			upload_frame.open();   
			return;   
		}   
		upload_frame = wp.media({   
			title: '插入图片',   
			button: {   
				text: '插入',   
			},   
			multiple: false   
		});   
		upload_frame.on('select',function(){  //里面是选择图片后的动作,把图片地址赋值给input 
			attachment = upload_frame.state().get('selection').first().toJSON();   
			jQuery('input[name='+value_id+']').val(attachment.url);   
		});	   
		upload_frame.open();   
	});   
});   
</script>

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

<input type="text" size="60" value="" name="upload" id="upload"/>
<a id="upload" class="upload_button button" href="#">上传</a>

完成后会有以下效果:

 收藏 (2) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:轻语博客 » 用wordpress自带的媒体中心上传图片

分享到: 更多 (0)

评论 3

评论前必须登录!

立即登录   注册

  1. #2
    avatar

    支持

    a1111115个月前 (07-16)来自天朝的朋友 谷歌浏览器 Windows 10 登录以回复
  2. #1

    支持一下

    Mir .6个月前 (06-23)来自天朝的朋友 谷歌浏览器  Android 7.1.1 OPPO R11st Build/NMF26X 登录以回复

本站承接WordPress主题开发,主题定制,功能开发

QQ咨询联系我们
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活