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

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

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

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

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

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

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

①在主題后端代碼目錄中新建一個(gè)js文件，名稱(chēng)大家隨便好了，這個(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è)圖片地址的值，在不同地方使用它的寫(xiě)法就會(huì)不同，如在主題配置中，這個(gè)值的形式為￥zbp->Config('主題ID')->meta_thumb，而在UE編輯器文章編輯頁(yè)中的形式就是$article->Metas->thumb。

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