王尘宇

假如你正在开发一个主题，那末你肯定要用到图片上传如许一个功用，最少你最少要在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_”如许的情势！