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 相关文章推荐
js禁止小键盘输入数字功能代码
Aug 01 Javascript
javascript的console.log()用法小结
May 31 Javascript
让angularjs支持浏览器自动填表
Nov 10 Javascript
js实现一个链接打开两个链接地址的方法
May 12 Javascript
javascript模拟评分控件实现方法
May 13 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 Javascript
基于ajax与msmq技术的消息推送功能实现代码
Dec 26 Javascript
js实现短信发送倒计时功能(正则验证)
Feb 10 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
Sep 18 Javascript
vue非父子组件通信问题及解决方法
Jun 11 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
Sep 21 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
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
PHP截取汉字乱码问题解决方法mb_substr函数的应用
2008/03/30 PHP
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
PHP数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
thinkPHP分页功能实例详解
2017/05/05 PHP
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
2013/11/23 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
JS回调函数的应用简单实例
2014/09/17 Javascript
Javascript基础教程之break和continue语句
2015/01/18 Javascript
JavaScript实现找质数代码分享
2015/03/24 Javascript
javascript实现简单加载随机色方块
2015/12/25 Javascript
JavaScript数据结构与算法之栈与队列
2016/01/29 Javascript
jQuery简单实现MD5加密的方法
2017/03/03 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
详解Vue打包优化之code spliting
2018/04/09 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
vue npm install 安装某个指定的版本操作
2020/08/11 Javascript
在antd Form表单中select设置初始值操作
2020/11/02 Javascript
用python登录Dr.com思路以及代码分享
2014/06/25 Python
python通过装饰器检查函数参数数据类型的方法
2015/03/13 Python
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
python 和c++实现旋转矩阵到欧拉角的变换方式
2019/12/04 Python
python支持多继承吗
2020/06/19 Python
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
保护野生动物倡议书
2014/05/16 职场文书
大学新生入学教育方案
2014/05/16 职场文书
百日安全生产活动总结
2014/07/05 职场文书
高中生毕业评语
2014/12/30 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书
2015年数学教师工作总结
2015/05/20 职场文书
新课程改革心得体会
2016/01/22 职场文书