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

1个评论 | 6088人浏览

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

KindEditor编辑器本地上传图片文件后（单个图片上传和批量图片上传），将数据回调，以实现自由设置任何一张图片做为文章形象图且在指定区域展示此形象图的功能。

以下是KindEditor 4.1.11的示例代码：

"frm"  name= "frm"  action= ""  method= "post" >
形象图： "pic"  name= "pic"  type= "text"  />
"piclist"  id= "piclist"  onChange= "frm.pic.value=this.value; if(this.value.length>0){picshow.innerHTML='';}else{picshow.innerHTML='';}" >
    "" >不指定文章形象图

"picshow" > "images/nopic.gif"  width= '150'  height= '95'  />

"stylesheet"  href= "kindeditor/themes/default/default.css"  />
"utf-8"  src= "kindeditor/kindeditor-all.js" >
"utf-8"  src= "kindeditor/lang/zh-CN.js" >
</code> </div> <div class="line number12 index11 alt1"> <code class="js keyword">var</code>  <code class="js plain">KE;</code> </div> <div class="line number13 index12 alt2"> <code class="js plain">KindEditor.ready(</code> <code class="js keyword">function</code> <code class="js plain">(K) {</code> </div> <div class="line number14 index13 alt1"> <code class="js spaces">    </code> <code class="js plain">KE = K.create(</code> <code class="js string">'#Content'</code> <code class="js plain">,{</code> </div> <div class="line number15 index14 alt2"> <code class="js spaces">        </code> <code class="js plain">uploadJson : </code> <code class="js string">'kindeditor/asp/upload_json.asp'</code> <code class="js plain">,</code> </div> <div class="line number16 index15 alt1"> <code class="js spaces">        </code> <code class="js plain">fileManagerJson : </code> <code class="js string">'kindeditor/asp/file_manager_json.asp'</code> <code class="js plain">,</code> </div> <div class="line number17 index16 alt2"> <code class="js spaces">        </code> <code class="js plain">allowImageUpload: </code> <code class="js keyword">true</code> <code class="js plain">, </code> <code class="js comments">//多图上传</code> </div> <div class="line number18 index17 alt1"> <code class="js spaces">        </code> <code class="js plain">allowFileManager : </code> <code class="js keyword">true</code> <code class="js plain">, </code> <code class="js comments">//浏览图片空间</code> </div> <div class="line number19 index18 alt2"> <code class="js spaces">        </code> <code class="js plain">filterMode : </code> <code class="js keyword">false</code> <code class="js plain">, </code> <code class="js comments">//HTML特殊代码过滤</code> </div> <div class="line number20 index19 alt1"> <code class="js spaces">        </code> <code class="js plain">afterBlur: </code> <code class="js keyword">function</code> <code class="js plain">(){ </code> <code class="js keyword">this</code> <code class="js plain">.sync(); }, </code> <code class="js comments">//编辑器失去焦点(blur)时执行的回调函数（将编辑器的HTML数据同步到textarea）</code> </div> <div class="line number21 index20 alt2"> <code class="js spaces">        </code> <code class="js plain">afterUpload : </code> <code class="js keyword">function</code> <code class="js plain">(url, data, name) { </code> <code class="js comments">//上传文件后执行的回调函数，必须为3个参数</code> </div> <div class="line number22 index21 alt1"> <code class="js spaces">            </code> <code class="js keyword">if</code> <code class="js plain">(name==</code> <code class="js string">"image"</code>  <code class="js plain">|| name==</code> <code class="js string">"multiimage"</code> <code class="js plain">){ </code> <code class="js comments">//单个和批量上传图片时</code> </div> <div class="line number23 index22 alt2"> <code class="js spaces">                </code> <code class="js keyword">if</code> <code class="js plain">(K(</code> <code class="js string">"#pic"</code> <code class="js plain">).length>0){ </code> <code class="js comments">//文本框存在</code> </div> <div class="line number24 index23 alt1"> <code class="js spaces">                    </code> <code class="js plain">document.getElementById(</code> <code class="js string">'piclist'</code> <code class="js plain">).options[document.getElementById(</code> <code class="js string">'piclist'</code> <code class="js plain">).length]=</code> <code class="js keyword">new</code>  <code class="js plain">Option(url,url); </code> <code class="js comments">//下拉列表框增加一条</code> </div> <div class="line number25 index24 alt2"> <code class="js spaces">                    </code> <code class="js plain">document.getElementById(</code> <code class="js string">'piclist'</code> <code class="js plain">).selectedIndex+=1; </code> <code class="js comments">//选定刚新增的这一条</code> </div> <div class="line number26 index25 alt1"> <code class="js spaces">                    </code> <code class="js plain">K(</code> <code class="js string">"#indexpicimg"</code> <code class="js plain">).html(</code> <code class="js string">"<img src='"</code>  <code class="js plain">+ url + </code> <code class="js string">"' width='150' height='95' />"</code> <code class="js plain">); </code> <code class="js comments">//重置图片展示区DIV的HTML内容</code> </div> <div class="line number27 index26 alt2"> <code class="js spaces">                    </code> <code class="js plain">K(</code> <code class="js string">"#pic"</code> <code class="js plain">).val(url); </code> <code class="js comments">//重置文本框值</code> </div> <div class="line number28 index27 alt1"> <code class="js spaces">                </code> <code class="js plain">}</code> </div> <div class="line number29 index28 alt2"> <code class="js spaces">            </code> <code class="js plain">}</code> </div> <div class="line number30 index29 alt1"> <code class="js spaces">        </code> <code class="js plain">}</code> </div> <div class="line number31 index30 alt2"> <code class="js spaces">    </code> <code class="js plain">});</code> </div> <div class="line number32 index31 alt1"> <code class="js plain">});</code> </div> <div class="line number33 index32 alt2"> <code class="js plain">
"Content"  name= "Content"  style= " width: 99%; height: 500px; visibility: hidden; display: block; " >