Kindeditor单独调用多图上传实例

 更新时间:2017年07月31日 08:13:27   投稿:jingxian  
下面小编就为大家带来一篇Kindeditor单独调用多图上传实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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常见继承模式实例小结

    这篇文章主要介绍了JavaScript常见继承模式,结合实例形式总结分析了javascript原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承等相关实现技巧与操作注意事项,需要的朋友可以参考下
    2019-01-01
  • JS实现点击链接切换显示隐藏内容的方法

    JS实现点击链接切换显示隐藏内容的方法

    这篇文章主要介绍了JS实现点击链接切换显示隐藏内容的方法,涉及javascript鼠标事件响应及页面元素属性动态变换相关操作技巧,需要的朋友可以参考下
    2017-10-10
  • 浅谈微信小程序之官方UI框架we-ui使用教程

    浅谈微信小程序之官方UI框架we-ui使用教程

    这篇文章主要介绍了浅谈微信小程序之官方UI框架we-ui使用教程,WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • 微信小程序实现轮播图效果

    微信小程序实现轮播图效果

    这篇文章主要为大家详细介绍了微信小程序实现轮播图效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • JavaScript 精美贪吃蛇实现流程

    JavaScript 精美贪吃蛇实现流程

    看起来好像很复杂的贪吃蛇,到底是怎么用JavaScript去实现的?下面就来一步一步地,剖析怎么用JavaScript,放在任意一个浏览器中,把贪吃蛇搞起来
    2021-11-11
  • JavaScript中Map遍历方法代码示例

    JavaScript中Map遍历方法代码示例

    这篇文章主要给大家介绍了关于JavaScript中Map遍历方法的相关资料,Map是一组键值对的结构,具有极快的查找速度,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • JS 解决Cannot set properties of undefined的问题

    JS 解决Cannot set properties of undefined的问题

    遇到这样问题当前的是当前对象或者数组是undefined,但是却用来引用属性或者索引,遇到这样的问题如何解决呢,下面通过本文给大家介绍JS 如何解决Cannot set properties of undefined,需要的朋友可以参考下
    2024-01-01
  • echarts自定义tooltip中的内容代码示例

    echarts自定义tooltip中的内容代码示例

    在ECharts中,通过formatter函数自定义图例样式,可以实现更灵活的图表展示,满足特定的视觉需求,这篇文章主要介绍了echarts自定义tooltip中内容的相关资料,需要的朋友可以参考下
    2024-10-10
  • 分页栏的web标准实现

    分页栏的web标准实现

    分页栏是网页上最常见不过的一个组件,本博文给出分页栏的一个web2.0标准示例,并作简要分析
    2011-11-11
  • 多种方法判断Javascript对象是否存在

    多种方法判断Javascript对象是否存在

    我们要判断一个全局对象myObj是否存在,如果不存在,就对它进行声明,Juriy Zaytsev指出判断一个Javascript对象是否存在,有超过50种写法,下面为大家介绍几种比较常用的,感兴趣的朋友可以参考下
    2013-09-09

最新评论