如果你正在開發(fā)一個(gè)主題，那么你肯定要用到圖片上傳這樣一個(gè)功能，起碼你至少要在zblog主題配置中添加個(gè)logo上傳的按鈕！

那么在zblog中，這個(gè)圖片上傳的功能我們?cè)撛鯓尤?shí)現(xiàn)呢？這個(gè)問題的答案一般有兩種：

1，自己敲代碼來實(shí)現(xiàn)

這種方法雖然我還是比較推薦的，但是對(duì)于剛剛開始學(xué)開發(fā)的新人來說，它不免有些困難重重，所以這不是我要說的教程！

2，利用zblog已有的UE編輯器來實(shí)現(xiàn)

這種方法雖然對(duì)于我們開發(fā)的主題來說有一定的限制，就如大家經(jīng)常會(huì)在一個(gè)主題說明中看到的一句話“你可以不使用UE編輯器，關(guān)閉它，但請(qǐng)勿刪除UE編輯器”一樣，這種方法的限制就是用戶必須使用UE編輯器才能實(shí)現(xiàn)配置中的圖片上傳！

但，這樣的局限并不重要，重點(diǎn)是這種方法即簡(jiǎn)單又省力，而且也不會(huì)給用戶的網(wǎng)站帶來一點(diǎn)點(diǎn)的負(fù)面影響！所以我建議初入zblog開發(fā)的朋友選擇使用這樣的方法，具體實(shí)現(xiàn)代碼如下說明：

①在主題后端代碼目錄中新建一個(gè)js文件，名稱大家隨便好了，這個(gè)文件的代碼如下：

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());
	});
});

②在需要上傳圖片的頁(yè)面源代碼中，引入上面的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標(biāo)簽可以根據(jù)你自己的實(shí)際情況進(jìn)行改變，另外，第一個(gè)input標(biāo)簽和下面的img標(biāo)簽中的{$value}代表的是一個(gè)圖片地址的值，在不同地方使用它的寫法就會(huì)不同，如在主題配置中，這個(gè)值的形式為￥zbp->Config('主題ID')->meta_thumb，而在UE編輯器文章編輯頁(yè)中的形式就是$article->Metas->thumb。

注：上方的input的那么值“meta_thumb”，如果在主題配置中的話，不能這樣寫，這個(gè)一般是在文章編輯頁(yè)中的寫法，主題配置中取名不要用“meta_”這樣的形式！