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单独调用多图上传的更多相关文章
- 单独调用kindeditor的多图上传组件实现多图上传
本例是单独调用kindeditor多图上传的组件来进行多图上传,兼容性你懂得! 官方示例地址:http://kindeditor.net/ke4/examples/multi-image-dialog ...
- 微信小程序 多图上传解决方案
为了使代码体积小 我这里将多图上传 封装到单独的一个js 页面的js调用他 我们看firhealth.js文件内容 // pages/home/home.js var upload = requir ...
- Java Servlet+Objective-c图上传 步骤详细
一. Servlet 1.创建图片保存的路径 在项目的WebContent下创建一个上传图片的专属文件夹. 这个文件夹创建后,我们保存的图片就在该文件夹的真实路径下,但是在项目中是无法看到上传的图片的 ...
- PHP之:多图上传
撰写日期:2016-6-30 15:17:35 Thursday 参考 http://a3147972.blog.51cto.com/2366547/1381136 (08-05ThinkPHP+sw ...
- 微信jssdk,实现多图上传的一点心得
一.首先在common.js里封装一个函数,在需要调用jsSDK的页面引用此方法即可实现微信的信息配置function signatureJSSDK() { var url = window.loca ...
- 微信企业号办公系统-JSSDK上传图片(多图上传)
在开发微信企业号办公系统中,涉及到了图片上传功能,一开始使用的flash插件上传方法,在苹果手机上可以调用相机直接拍摄照片,但在安卓手机上只能选择照片. 微信jssdk-api带有一套完整的调用选择本 ...
- springBoot+ vue+ Element-ui实现合并多图上传(一次请求多张图片)
这次上传使用的是Elemet-ui的uoload上传组件,组件预留的钩子回调还是比较充足的. 1: 实现多图上传主要用到以下两个属性: 下面讲一下属性使用: <el-upload :actio ...
- UEditor调用上传图片、上传文件等模块
来源:https://www.cnblogs.com/lhm166/articles/6079973.html 说到百度富文本编辑器ueditor(下面简称ue),我不得不给它一个大大的赞.我们在网站 ...
- thinkphp3.2.2有预览的多图上传
thinkphp3.2.2有预览的多图上传 整体思路 1 封装文件上传和图片上传的类文件 2 视图中添加相关JS和表单提交 3 控制器中添加上传文件的相关代码 一 2个class 文件 请上传到/Th ...
随机推荐
- vue_cli安装
一. 安装 node.js 首先需要安装node环境,可以直接到中文官网http://nodejs.cn/下载安装包. 只是这样安装的 node 是固定版本的,如果需要多版本的 node,可以使用 n ...
- 安装 zookeeper
https://www.w3cschool.cn/zookeeper/zookeeper_cli.html ZooKeeper是一种分布式协调服务,用于管理大型主机.在分布式环境中协调和管理服务是一个 ...
- 说Gradle
说Gradle 刚开始认识Gradle这个名词是在蘑菇街的一场 交流会上,当时只是一个概念:第二面,是试图下载编译spring源码的时候:第三面,就是我司较真的安卓主程,有一天兴高彩烈的跟我说,我 ...
- Python字符串拼接、格式化输出、深浅复制
1.Python字符串拼接:方法挺多.挺好用的.灵活使用可使代码简洁.可读性好. #1.用4种方法,将列表li = ['I','python','like'], #里面的单词拼成: I**like** ...
- js 点击页面出现烟花 心形
css :1 body{width:1000px; height:500px;} input{ margin:100px; width:250px; height: 50px } 3 .Firewor ...
- 小乐乐打游戏(BFS+曼哈顿距离)
时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言65536K 64bit IO Format: %lld 题目描述 小乐乐觉得学习太简单了,剩下那么多的时间好无聊 ...
- 毕业设计 python opencv实现车牌识别 形状定位
主要代码参考https://blog.csdn.net/wzh191920/article/details/79589506 GitHub:https://github.com/yinghualuow ...
- sshd服务及系统文件传输
一.sshd 简介 sshd= secure shell 可以通过网络在主机中开机shell的服务 客户端软件 sshd 连接方式: ssh username@ip ##文本模式的链 ...
- SVN更改通知的工具commitmonitor
SVN更改通知的工具commitmonitor 下载地址: https://sourceforge.net/projects/commitmonitor/files/latest/download 工 ...
- Django易混淆问题
1.Django本身提供了runserver 为什么不能用来 部署 runserver 方法是调试 Django 时经常用到的运行方式,它使用 Django 自带的 WSGI Server 运行,主 ...