KindEditor上傳圖片后回調傳入文本框和列表框并顯示圖片

2016-5-6 10:14:17 | 作者：老鐵SEO | 1個評論 | 人瀏覽

KindEditor編輯器本地上傳圖片文件后（單個圖片上傳和批量圖片上傳），將數據回調，以實現自由設置任何一張圖片做為文章形象圖且在指定區域展示此形象圖的功能。

以下是KindEditor 4.1.11的示例代碼：

<form id="frm" name="frm" action="" method="post">
形象圖：<input id="pic" name="pic" type="text" />
<select name="piclist" id="piclist" onChange="frm.pic.value=this.value; if(this.value.length>0){picshow.innerHTML='<img src=' + this.value + ' width=150 height=95 />';}else{picshow.innerHTML='<img src=images/nopic.gif width=150 height=95 />';}">
	<option value="">不指定文章形象圖</option>
</select>
<div id="picshow"><img src="images/nopic.gif" width='150' height='95' /></div>
 
<link rel="stylesheet" href="kindeditor/themes/default/default.css" />
<script charset="utf-8" src="kindeditor/kindeditor-all.js"></script>
<script charset="utf-8" src="kindeditor/lang/zh-CN.js"></script>
<script>
var KE;
KindEditor.ready(function(K) {
	KE = K.create('#Content',{
		uploadJson : 'kindeditor/asp/upload_json.asp',
		fileManagerJson : 'kindeditor/asp/file_manager_json.asp',
		allowImageUpload: true, //多圖上傳
		allowFileManager : true, //瀏覽圖片空間
		filterMode : false, //HTML特殊代碼過濾
		afterBlur: function(){ this.sync(); }, //編輯器失去焦點(blur)時執行的回調函數（將編輯器的HTML數據同步到textarea）
		afterUpload : function(url, data, name) { //上傳文件后執行的回調函數，必須為3個參數
			if(name=="image" || name=="multiimage"){ //單個和批量上傳圖片時
				if(K("#pic").length>0){ //文本框存在
					document.getElementById('piclist').options[document.getElementById('piclist').length]=new Option(url,url); //下拉列表框增加一條
					document.getElementById('piclist').selectedIndex+=1; //選定剛新增的這一條
					K("#indexpicimg").html("<img src='" + url + "' width='150' height='95' />"); //重置圖片展示區DIV的HTML內容
					K("#pic").val(url); //重置文本框值
				}
			}
		}
	});
});
</script>
<textarea id="Content" name="Content" style=" width: 99%; height: 500px; visibility: hidden; display: block; "></textarea>
</form>

本文來自: 老鐵博客，轉載請保留出處！歡迎發表您的評論

相關標簽：KindEditor  編輯器  JS特效  文件操作  文件上傳  無組件上傳  

相關推薦

• kindeditor上傳圖片后自動縮放尺寸2016-11-23 12:58:23
• kindeditor上傳圖片，默認顯示本地上傳2016-9-23 12:37:30
• kindeditor隱藏上傳圖片框網絡圖片或本地上傳的功能2016-9-22 15:33:54
• JS獲取指定A標簽的鏈接地址url的頂級域名和當前域名2016-9-20 10:49:24
• JS獲取三種CSS樣式的方法2016-9-20 10:45:6
• JS飄浮廣告代碼（兼容多瀏覽器）2016-9-7 13:17:30
• JS確認對話框confirm()用法總結（常用于彈出確定、取消刪除）2016-9-1 10:9:57
• JS跳轉頁面方法總結2016-8-30 14:59:0
• JS后退、前進、返回上一頁并刷新代碼2016-8-30 14:22:18
• JS提交表單方法總結2016-8-29 15:59:56