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单独调用多图上传的更多相关文章

  1. 单独调用kindeditor的多图上传组件实现多图上传

    本例是单独调用kindeditor多图上传的组件来进行多图上传,兼容性你懂得! 官方示例地址:http://kindeditor.net/ke4/examples/multi-image-dialog ...

  2. 微信小程序 多图上传解决方案

    为了使代码体积小  我这里将多图上传 封装到单独的一个js 页面的js调用他 我们看firhealth.js文件内容 // pages/home/home.js var upload = requir ...

  3. Java Servlet+Objective-c图上传 步骤详细

    一. Servlet 1.创建图片保存的路径 在项目的WebContent下创建一个上传图片的专属文件夹. 这个文件夹创建后,我们保存的图片就在该文件夹的真实路径下,但是在项目中是无法看到上传的图片的 ...

  4. PHP之:多图上传

    撰写日期:2016-6-30 15:17:35 Thursday 参考 http://a3147972.blog.51cto.com/2366547/1381136 (08-05ThinkPHP+sw ...

  5. 微信jssdk,实现多图上传的一点心得

    一.首先在common.js里封装一个函数,在需要调用jsSDK的页面引用此方法即可实现微信的信息配置function signatureJSSDK() { var url = window.loca ...

  6. 微信企业号办公系统-JSSDK上传图片(多图上传)

    在开发微信企业号办公系统中,涉及到了图片上传功能,一开始使用的flash插件上传方法,在苹果手机上可以调用相机直接拍摄照片,但在安卓手机上只能选择照片. 微信jssdk-api带有一套完整的调用选择本 ...

  7. springBoot+ vue+ Element-ui实现合并多图上传(一次请求多张图片)

    这次上传使用的是Elemet-ui的uoload上传组件,组件预留的钩子回调还是比较充足的. 1:  实现多图上传主要用到以下两个属性: 下面讲一下属性使用: <el-upload :actio ...

  8. UEditor调用上传图片、上传文件等模块

    来源:https://www.cnblogs.com/lhm166/articles/6079973.html 说到百度富文本编辑器ueditor(下面简称ue),我不得不给它一个大大的赞.我们在网站 ...

  9. thinkphp3.2.2有预览的多图上传

    thinkphp3.2.2有预览的多图上传 整体思路 1 封装文件上传和图片上传的类文件 2 视图中添加相关JS和表单提交 3 控制器中添加上传文件的相关代码 一 2个class 文件 请上传到/Th ...

随机推荐

  1. dedecms图片绝对路径(附件绑定域名)的设置方法

    dedecms默认的附件路径使用的是相对路径,但是在实际应用,我们可能会需要让文章的图片附件显示绝对地址,解决方案如下: 1.打开include目录下的文件extend.func.php,添加函数re ...

  2. t-sql read xlsx

    How to Read and Load an Excel 2007 or Excel 2010 File Without Using Import/Export Utility To read an ...

  3. [USACO10OCT]湖计数Lake Counting 联通块

    题目描述 Due to recent rains, water has pooled in various places in Farmer John's field, which is repres ...

  4. CF796C Bank Hacking 思维

    Although Inzane successfully found his beloved bone, Zane, his owner, has yet to return. To search f ...

  5. 【预警通告】Apache Struts2 远程代码执行漏洞

    Apache Structs2的Jakarta Multipart parser插件存在远程代码执行漏洞,漏洞编号为CVE-2017-5638.攻击者可以在使用该插件上传文件时,修改HTTP请求头中的 ...

  6. Codeforces 527C Glass Carving (最长连续0变形+线段树)

    Leonid wants to become a glass carver (the person who creates beautiful artworks by cutting the glas ...

  7. 基于ksoap2-android的soap的封装

    实例基于ksoap2-android-assembly-3.3.0-jar-with-dependencies.jar 1:定义回调接口,通过泛型确定返回值类型 package com.ciii.bd ...

  8. html样式

    <!doctype html> <html> <head> <style id="mceDefaultStyles" type=" ...

  9. Ubuntu 安装 phpredis扩展

    官网 https://github.com/phpredis/phpredis 下载->然后解压->上传服务器 /etc/phpredis 进行 cd /etc/phpredisphpiz ...

  10. thinkPHP5.0分页传参

    分页函数paginate(),主要参数有:list_rows每页数量.page当前页.path URL路径.query URL额外参数.fragment URL锚点.type分页l类型 public ...