KindEditor上传图片后回调传入文本框和列表框并显示图片
来源:互联网 发布:sql删除数据库命令 编辑:程序博客网 时间:2024/06/16 08:25
- 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>
阅读全文
0 0
- KindEditor上传图片后回调传入文本框和列表框并显示图片
- 图片上传并显示
- KindEditor上传图片
- 使用Kindeditor上传图片
- KindEditor图片上传到七牛云
- KindEditor上传图片插件
- KindEditor修改图片上传
- KindEditor上传本地图片
- kindeditor 自定义上传图片
- KindEditor上传图片
- KindEditor上传图片
- kindeditor编辑器上传图片
- kindeditor图片上传
- Kindeditor实现图片上传
- 修改KindEditor上传图片数量和大小
- kindEditor完整认识 PHP上调用并上传图片说明
- ssh上传并显示图片
- jsp 上传图片并显示
- PS入门基础<3>
- DNS服务器配置实验--正向解析、反向解析、主从解析、子域授权和bindview
- NameNode启动过程
- 枚举
- 我的学习记录25
- KindEditor上传图片后回调传入文本框和列表框并显示图片
- select name where id>1
- PHP实现分页
- Tomcat在非Root用户下使用80端口启动报错解决办法
- 关于maven项目jar包的版本管理方法
- java 取出JComboBox中的当前值
- JavaWeb学习笔记-XML-1
- 收藏的博客、文章、工具等
- hadoop2.8.2无密码登入