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

[db:摘要]

如果你正在开发一个主题,那么你肯定要用到图片上传这样一个功能,起码你至少要在zblog主题配置中添加个logo上传的按钮!那么在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_”这样的形式!

原创文章,作者:[db:作者],如若转载,请注明出处:https://008i.cn/15273.html