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中使用展开运算符

    展开运算符(spread operator)允许一个表达式在某处展开,下面这篇文章主要给大家介绍了关于如何通过一文教会你如何在JavaScript中使用展开运算符的相关资料,需要的朋友可以参考下
    2022-10-10
  • 仅30行代码实现Javascript中的MVC

    仅30行代码实现Javascript中的MVC

    这篇文章主要介绍了仅30行代码实现Javascript中的MVC的方法,MVC的基础是观察者模式,这是实现model和view同步的关键,想要深入了解的朋友可以参考本文
    2016-02-02
  • JS实现闪动的title消息提醒效果

    JS实现闪动的title消息提醒效果

    这篇文章主要介绍了JS实现闪动的title消息提醒效果,考虑并兼容了大部份的浏览器,需要的朋友可以参考下
    2014-06-06
  • JS原型与原型链的深入理解

    JS原型与原型链的深入理解

    这篇文章主要和大家一起深入理解JS原型与原型链,原型是JavaScript中一个比较难理解的概念,本文为大家解决这个难题,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 纯js实现手风琴效果

    纯js实现手风琴效果

    这篇文章主要介绍了纯js+html制作手风琴和纯css+html制作手风琴两种效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • 如何在JavaScript中优雅的提取循环内数据详解

    如何在JavaScript中优雅的提取循环内数据详解

    这篇文章主要给大家介绍了关于如何在JavaScript中优雅的提取循环内数据的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • 去除字符串左右两边的空格(实现代码)

    去除字符串左右两边的空格(实现代码)

    下面小编就为大家带来一篇去除字符串左右两边的空格(实现代码)。小编觉得挺不错的,现在分享给大家,也给大家做个参考
    2016-05-05
  • JavaScript解决浮点数计算不准确问题的方法分析

    JavaScript解决浮点数计算不准确问题的方法分析

    这篇文章主要介绍了JavaScript解决浮点数计算不准确问题的方法,结合实例形式分析了javascript浮点数运算精度误差的原因以及相关的解决方法与具体操作技巧,需要的朋友可以参考下
    2018-07-07
  • JavaScript三大变量声明详析

    JavaScript三大变量声明详析

    这篇文章主要介绍了JavaScript三大变量声明详析,三大变量声明主要包括var、const和let,下面文章我们就围绕三者展开详细内容介绍,需要的朋友可以参考一下
    2022-06-06
  • JavaScript常用验证函数实例汇总

    JavaScript常用验证函数实例汇总

    这篇文章主要介绍了JavaScript常用验证函数,实例汇总了如字符串验证、表单验证及js常用特效等诸多js常用验证函数及相关技巧,非常具有实用价值,需要的朋友可以参考下
    2014-11-11

最新评论