红黑大战-大发黑红棋牌-万人手游

网站地图 | RSS订阅 红黑大战 - 上海SEO优化|上海网站建设|蜘蛛池出租|红黑大战
你的位置:首页 » 网站建设 » 正文

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特效  文件操作  文件上传  无组件上传  
  • 已有1位网友发表了一针见血的评论,你还等什么?

    必填

    选填

    记住我,下次回复时不用重大发黑红棋牌新输入个人信息

    必填,不填不让红黑大战过哦,嘻嘻。

    ◎欢迎参与讨论,红黑大战请在这里发表您的看法、交流您的观点。

    5分快乐8 | 一分快三 | 五分28 | 大发时时采 | 千人黑红大战 | 5分六合 | 5分快三 | 幸运五分彩 | 分分pk10 | 万人牛牛 | 5分时时彩 | 大发牛牛 | 五分快三 | 超级赛车 | 龙虎对战 | vr赛车 | 5分3D | 大发龙虎对战 | 一分PK10注册 | 5分排列3