Kindeditor单独调用多图上传实例


Posted in Javascript onJuly 31, 2017

html代码:

<input type="button" id="J_selectImage" value="图片上传" />
<div id="J_imageView">
<?php foreach($imgs as $row):?>
<div class="img_view"><img class='iYuUpload-View' src='/Uploads/<?php echo $row['file_url'];?>'/><span class="view_del"id="<?=$row["id"]?>"><img delTarget="p_<?=$row['id']?>" src="/Public/Home/img/close_delete_2.png"></span></div>

<input type='hidden' thumbID="p_<?=$row['id']?>" value='<?=$row['thumbnail_url']?>' name='thumbPath[]' >
<input type='hidden' thumbID="p_<?=$row['id']?>" value='<?=$row['file_url']?>' name='imagePath[]'>
<?php endforeach;?>
</div>

JS代码:

<script>
function clearUploadPic(i,obj){
$("input[preImagePathId="+i+"]").val("");
$("input[preThumbPathId="+i+"]").val("");
obj.remove();
}
KindEditor.ready(function(K) {
window.editor = K.create('#editor_id', {
height:'500px',
uploadJson: '<?=u('Upload/editorUpload?uid='.cookie('uid'))?>',
items : [
'source','fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist', '|', 'image']

});



K('#J_selectImage').click(function() {
editor.loadPlugin('multiimage', function() {
editor.plugin.multiImageDialog({
clickFn : function(urlList) {
var div = K('#J_imageView');
//div.html('');
K.each(urlList, function(i, data) {

div.append('<div class="img_view"><img src="' + data.url + '"><span class="view_del" onclick="clearUploadPic('+i+',$(this).parent())"><img src="/Public/Home/img/close_delete_2.png"></span></div>');
div.append('<input preImagePathId="'+i+'" name="imagePath[]" class="image-path" type="hidden" value="' + data.url +'">');
div.append('<input preThumbPathId="'+i+'" name="thumbPath[]" class="thumb-path" type="hidden" value="' + data.mini_url + '">');
//$("#thumbPath").val($("#thumbPath").val()+""+ data.mini_url);
});
editor.hideDialog();
}
});
});
});
})

</script>

以上这篇Kindeditor单独调用多图上传实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
Nov 06 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
Apr 02 Javascript
jquery 清空file域示例(兼容个浏览器)
Oct 11 Javascript
jQuery中trigger()方法用法实例
Jan 19 Javascript
Javascript中的几种URL编码方法比较
Jan 23 Javascript
JavaScript中的getTime()方法使用详解
Jun 10 Javascript
javascript回到顶部特效
Jul 30 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 Javascript
分享JS表单验证源码(带错误提示及密码等级)
Jan 05 Javascript
JavaScript获取时区实现过程解析
Sep 24 Javascript
老生常谈ES6中的类
Jul 31 #Javascript
JS时间控制实现动态效果的实例讲解
Jul 31 #Javascript
JavaScript实现简单的双色球(实例讲解)
Jul 31 #Javascript
深入理解Vue transition源码分析
Jul 30 #Javascript
使用travis-ci如何持续部署node.js应用详解
Jul 30 #Javascript
Vue框架中正确引入JS库的方法介绍
Jul 30 #Javascript
webpack配置sass模块的加载的方法
Jul 30 #Javascript
You might like
一个php作的文本留言本的例子(四)
2006/10/09 PHP
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
Laravel 框架控制器 Controller原理与用法实例分析
2020/04/14 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
js null undefined 空区别说明
2010/06/13 Javascript
基于jQuery的自动完成插件
2011/02/03 Javascript
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
jQuery.extend 函数的详细用法
2012/06/27 Javascript
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
Bootstrap每天必学之响应式导航、轮播图
2016/04/25 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
2018/02/24 jQuery
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
python实现倒计时的示例
2014/02/14 Python
Python 不同对象比较大小示例探讨
2014/08/21 Python
Python functools模块学习总结
2015/05/09 Python
Django框架中方法的访问和查找
2015/07/15 Python
python 显示数组全部元素的方法
2018/04/19 Python
详解用python生成随机数的几种方法
2019/08/04 Python
Python实现TCP通信的示例代码
2019/09/09 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
TensorFlow的环境配置与安装教程详解(win10+GeForce GTX1060+CUDA 9.0+cuDNN7.3+tensorflow-gpu 1.12.0+python3.5.5)
2020/06/22 Python
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
上课睡觉检讨书
2014/01/28 职场文书
2015年幼儿园毕业感言
2014/02/12 职场文书
小学班长竞选演讲稿
2014/04/24 职场文书
2014年巴西世界杯口号
2014/06/05 职场文书
教师节横幅标语
2014/10/08 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书
2016年优秀少先队辅导员事迹材料
2016/02/26 职场文书
python实现腾讯滑块验证码识别
2021/04/27 Python
uni-app 微信小程序授权登录的实现步骤
2022/02/18 Javascript