如果你正在開發一個主題，那么你肯定要用到圖片上傳這樣一個功能，起碼你至少要在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_”這樣的形式！