主题OL

zblog主题开发中如何实现图片上传功能的代码

ZTOL ZBlog开发教程 2020-01-13 88 0

如果你正在开发一个主题,那么你肯定要用到图片上传这样一个功能,起码你至少要在zblog主题配置中添加个logo上传的按钮!

zblog主题开发中如何实现图片上传功能的代码-图1

那么在zblog中,这个图片上传的功能我们该怎样去实现呢?这个问题的答案一般有两种:

1,自己敲代码来实现

这种方法虽然我还是比较推荐的,但是对于刚刚开始学开发的新人来说,它不免有些困难重重,所以这不是我要说的教程!

2,利用zblog已有的UE编辑器来实现

这种方法虽然对于我们开发的主题来说有一定的限制,就如大家经常会在一个主题说明中看到的一句话“你可以不使用UE编辑器,关闭它,但请勿删除UE编辑器”一样,这种方法的限制就是用户必须使用UE编辑器才能实现配置中的图片上传!

但,这样的局限并不重要,重点是这种方法即简单又省力,而且也不会给用户的网站带来一点点的负面影响!所以我建议初入zblog开发的朋友选择使用这样的方法,具体实现代码如下说明:

①在主题后端代码目录中新建一个js文件,名称大家随便好了,这个文件的代码如下:

var ueditorConfig = document.createElement('script');
$(ueditorConfig).attr('src',bloghost + 'zb_users/plugin/UEditor/ueditor.config.php');
$("body").append(ueditorConfig);

var ueditorAll = document.createElement('script');
$(ueditorAll).attr('src',bloghost + 'zb_users/plugin/UEditor/ueditor.all.min.js');
$("body").append(ueditorAll);

var container = document.createElement('script');
$(container).attr('type','text/plain').attr('id','img_editor').css('display','none');
$("body").append(container);

ue_image = UE.getEditor('img_editor');
ue_image.ready(function(){
	$(document).on("click",".ue-image-upload",function(){		
		input = $(this).siblings('input.ue-image-url');
		img = $(this).siblings('img.ue-image');
		ue_image.getDialog("insertimage").open();
		ue_image.addListener('beforeInsertImage', function (t, arg) {
			input.attr("value", arg[0].src);
			img.attr('src',arg[0].src); 
		});
	});
	$(document).on("blur","input.ue-image-url",function(){	
	    if ($(this).val())
	    $(this).siblings('img.ue-image').attr('src',$(this).val());
	});
});

②在需要上传图片的页面源代码中,引入上面的js,在需要上传图片的地方,使用下面的代码:

<p>
<input name="meta_thumb" type="text" class="ue-image-url" value="{$value}" placeholder="输入图片URL或者上传图片">
<input class="ue-image-upload" type="button" value="上传图片">
<img src="{$value}" class="ue-image">
</p>

这里的p标签可以根据你自己的实际情况进行改变,另外,第一个input标签和下面的img标签中的{$value}代表的是一个图片地址的值,在不同地方使用它的写法就会不同,如在主题配置中,这个值的形式为¥zbp->Config('主题ID')->meta_thumb,而在UE编辑器文章编辑页中的形式就是$article->Metas->thumb。

注:上方的input的那么值“meta_thumb”,如果在主题配置中的话,不能这样写,这个一般是在文章编辑页中的写法,主题配置中取名不要用“meta_”这样的形式!

发表评论

用户头像 游客
此处应有掌声~

评论列表

还没有评论,快来说点什么吧~

QQ在线客服

客户服务

在线时间 上午:09:00-12:00 下午:14:00-21:00