KindEditor上传图片后回调传入文本框和列表框并显示图片

2016-5-6 10:14:17 | 作者：凌陈亮 | 1个评论 | 6088人浏览

http://www.lingchenliang.com/post/106.html

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>