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中Eval函数的使用说明
Oct 11 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
Mar 04 Javascript
jQuery实现带延迟效果的滑动菜单代码
Sep 02 Javascript
理解javascript封装
Feb 23 Javascript
JS表单数据验证的正则表达式(常用)
Feb 18 Javascript
angular 动态组件类型详解(四种组件类型)
Feb 22 Javascript
微信小程序 检查接口状态实例详解
Jun 23 Javascript
详解Javascript中new()到底做了些什么?
Mar 29 Javascript
小程序实现新用户判断并跳转激活的方法
May 20 Javascript
Vue请求java服务端并返回数据代码实例
Nov 28 Javascript
JavaScript onclick事件使用方法详解
May 15 Javascript
JavaScript设计模式之原型模式详情
Jun 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
php+jquery编码方面的一些心得(utf-8 gb2312)
2010/10/12 PHP
PHP实现对文本数据库的常用操作方法实例演示
2014/07/04 PHP
54个提高PHP程序运行效率的方法
2015/07/19 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
jQuery Selector选择器小结
2010/05/06 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
Javascript中的window.event.keyCode使用介绍
2011/04/26 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
ComboBox(下拉列表框)通过url加载调用远程数据的方法
2017/08/06 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
基于jQuery实现无缝轮播与左右点击效果
2018/05/13 jQuery
详解Ubuntu安装angular-cli遇到的坑
2018/09/08 Javascript
详解Axios统一错误处理与后置
2018/09/26 Javascript
基于axios 解决跨域cookie丢失的问题
2018/09/26 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
2020/03/07 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
Python中请使用isinstance()判断变量类型
2014/08/25 Python
python导出hive数据表的schema实例代码
2018/01/22 Python
深入理解Python爬虫代理池服务
2018/02/28 Python
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
基于python实现数组格式参数加密计算
2020/04/21 Python
如何在Windows中安装多个python解释器
2020/06/16 Python
python mock测试的示例
2020/10/19 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
可靠的数据流传输TCP
2016/03/15 面试题
车间主管岗位职责
2013/11/14 职场文书
小学社团活动总结
2014/06/27 职场文书
党员思想汇报材料
2014/12/19 职场文书
学生保证书
2015/01/16 职场文书
公积金贷款承诺书
2015/04/30 职场文书
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js
angular异步验证器防抖实例详解
2022/03/31 Javascript