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 相关文章推荐
JavaScript中null与undefined分析
Jul 25 Javascript
JavaScript 闭包在封装函数时的简单分析
Nov 28 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
Jun 10 Javascript
Javascript 多物体运动的实现
Dec 24 Javascript
JavaScript组件开发完整示例
Dec 15 Javascript
jquery实现图片上传前本地预览功能
May 10 Javascript
关于webuploader插件使用过程遇到的小问题
Nov 07 Javascript
原生node.js案例--前后台交互
Feb 20 Javascript
JavaScript实现前端分页控件
Apr 19 Javascript
4个顶级JavaScript高级文本编辑器
Oct 10 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
Dec 12 Javascript
Vue项目服务器部署之子目录部署方法
May 12 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
php 代码优化的42条建议 推荐
2009/09/25 PHP
PHP用SAX解析XML的实现代码与问题分析
2011/08/22 PHP
php实现图片添加水印功能
2014/02/13 PHP
PHP开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等)
2014/04/21 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
用Jquery.load载入页面实现局部刷新
2014/01/22 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
javascript返回顶部的按钮实现方法
2016/01/09 Javascript
JS判断元素是否在数组内的实现代码
2016/03/30 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
JavaScript实现无刷新上传预览图片功能
2017/08/02 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
JS异步执行结果获取的3种解决方式
2019/02/19 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
webpack HappyPack实战详解
2019/10/08 Javascript
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
Python解析excel文件存入sqlite数据库的方法
2016/11/15 Python
Python中元组,列表,字典的区别
2017/05/21 Python
python3 小数位的四舍五入(用两种方法解决round 遇5不进)
2019/04/11 Python
python区分不同数据类型的方法
2019/10/14 Python
python实现批量修改文件名
2020/03/23 Python
python基于selenium爬取斗鱼弹幕
2021/02/20 Python
美国现代家具购物网站:LexMod
2019/01/09 全球购物
Java里面如何创建一个内部类的实例
2015/01/19 面试题
介绍一下Transact-SQL中SPACE函数的用法
2015/09/01 面试题
中学校庆方案
2014/03/17 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
辞职信怎么写
2015/02/27 职场文书
社区扶贫帮困工作总结
2015/05/20 职场文书
详解Vue的options
2021/05/15 Vue.js
Python办公自动化之Excel(中)
2021/05/24 Python
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis