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单独调用多图上传实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Kindeditor单独调用单图上传增加预览功能的实例

    html代码: <p><input type="hidden" id="url1" name="IDCardPicture1" value="" /> <input type="button" id="image1" value="选择图片" style="width: 150px;height: 30px;" /&g

  • js控件Kindeditor实现图片自动上传功能

    Kindeditor是一款功能强大的开源在线HTML编辑器,支持所见即所得的编辑效果.它使用JavaScript编写,可以无缝地与多个不同的语言环境进行集成,如.NET.PHP.ASP.Java等.官方网站可以查看这里:http://kindeditor.net/index.php Kindeditor本身提供了许多非常实用的插件,由于代码开源,开发人员可以根据需要对其进行任意扩展和修改. 在使用Kindeditor编辑网站内容时考虑这样一个场景:编辑人员往往会从其它页面或者Word文档将内容复

  • 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='/Upl

  • rxjava+retrofit实现多图上传实例代码

    在看了网上多篇rxjava和retrofit的文章后,大概有了一个初步的认识,刚好要做一个多图上传的功能,就拿它开刀吧.下面的内容将基于之前实现方式和使用rxjava实现之间的异同展开,初次写笔记不喜就喷. 普通版多图上传 由于目前手机照片动辄几M的大小,如果不做处理就直接上传,我就笑笑不说话(给个眼神你自己体会).所以,上传分为两步:对图片进行压缩和请求上传.下面请看伪代码(PS:自己不会写后台,项目后台不能拿来用,所以只能给伪代码了) //图片集合 List<String> imgs =

  • php layui实现前端多图上传实例

    php结合layui前端实现多图上传 前端html代码 <div class="layui-upload"> <button type="button" class="layui-btn layui-btn-normal" id="testList">请选择图片</button> <span class="num_pic"></span> <

  • springmvc+kindeditor文件上传实例详解

    本文实例为大家分享了springmvc+kindeditor文件上传的具体代码,供大家参考,具体内容如下 下载kindeditor 压缩包里面的jar放到tomcat的lib文件夹下,kindeditor文件放工程里,不用的可以删掉 jsp页面 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ ta

  • PHP + plupload.js实现多图上传并显示进度条加删除实例代码

    PHP + plupload.js JS插件实现多图上传并显示进度条加删除实例,废话不多说,直接上代码 HTML代码: <!DOCTYPE html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no&qu

  • iOS使用AFN进行单图和多图上传的实例代码

    图片上传时必要将图片进行压缩,不然会上传失败 1.单张图上传 AFHTTPRequestOperationManager *manager = [AFHTTPRequestOperationManager manager]; [manager POST:urlString parameters:params constructingBodyWithBlock:^(id_Nonnull formData) { //使用日期生成图片名称 NSDateFormatter *formatter = [[

  • Android 多图上传后将图片进行九宫格展示的实例代码

    不多说上代码 public abstract class NineGridAdapter { protected Context context; protected List list; public NineGridAdapter(Context context, List list) { this.context = context; this.list = list; } public abstract int getCount(); public abstract String get

  • PHP实现多图上传(结合uploadify插件)思路分析

    本文实例讲述了PHP实现多图上传的方法.分享给大家供大家参考,具体如下: 1.已有图片可以删除 2.有一个新增的按钮 3.点击新增按钮,跳出frame框 4.在frame框中实现图片异步上传与及时效果 5.上传成功后,调用回调函数 6.弹出框中的图片可以进行删除 7.frame弹出框点击保存,把图片通过js展示到页面中 8.页面点击保存,把图片数据保存到数据库 <?php foreach($info['product_img'] as $product_img) { ?> <div st

  • php处理多图上传压缩代码功能

    网上看了一些资料,关于处理图片压缩的,找到的大部分是单图压缩的,要么是单前端或者后端的,所以就自己整了下前后端压缩,并支持多图的压缩图片实例.代码有点多,直接复制到编辑器看会比较清楚 1.先创建的一个简单的上传页面upload.php.先通过前端代码压缩图片,直接上代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport&quo

随机推荐