步骤1:
在KindEditor 文件夹 --plugins文件夹中 添加 uploadimage 插件文件夹
步骤2:
添加 uploadimage.js ,代码如下:
KindEditor.plugin('uploadimage', function(K) {
var editor = this, name = 'uploadimage';
//点击图标时执行
editor.clickToolbar(name, function() {
//弹出框的基础样式延续自带swfupload的css,加了一部分自定义一些ke-自定义的css,参考uploadimage.css
var html = '<div style="padding:20px;"><div class="swfupload"><div class="ke-swfupload"><div class="ke-swfupload-top"><div class="ke-inline-block ke-swfupload-button"><a href="javascript:;" class="ke-selectPic">选择图片</a><span class="ke-none"><input type="file" multiple="multiple" id="ke-filePic" class="ke-filePic" /></span></div><div class="ke-inline-block ke-swfupload-desc">允许用户同时上传20张图片,单张图片容量不超过5MB</div><span class="ke-button-common ke-button-outer ke-swfupload-startupload"><input type="button" class="ke-button-common ke-button" value="开始上传"></span></div><div class="ke-swfupload-body"></div></div></div></div>';
//KindEditor的弹层
var dialog = K.dialog({
width : 652,
height : 510,
title : '批量图片上传',
body : html,
closeBtn : {
name : '关闭',
click : function(e) {
dialog.remove();
}
},
previewBtn : {
name : '全部插入',
click : function(e) {
callAll();
}
},
yesBtn : {
name : '全部清空',
click : function(e) {
callClear();
}
},
noBtn : {
name : '取消',
click : function(e) {
dialog.remove();
}
}
});
//选择图片按钮
$(".ke-selectPic").bind('click',function(){
$(".ke-filePic").click();
});
//监听隐藏域fileinput的change事件,使用formData做多图数据存储器
var xindex=0;
var formData = new FormData();
var inputBox = document.getElementById("ke-filePic");
inputBox.addEventListener("change",function(e){
$.each(inputBox.files,function(i,item){
//添加预览,#可以给个默认图
var pic=$('<div class="ke-piclist"><span class="ke-picdel pic_'+xindex+'" data-id="'+xindex+'" title="删除">x</span><div class="ke-pictu"><span>等待上传</span><img src="#" /></div><div class="ke-pictext">'+item.name+'</div></div>');
$(".ke-swfupload-body").append(pic);
//添加到存储
formData.append("pic_"+xindex, item);
//预览图片
var reader = new FileReader();
reader.readAsDataURL(item);
reader.onload = function(event){
pic.find("img").attr('src',this.result);
}
//绑定删除按钮
pic.on("click", ".ke-picdel", function(){
var _index=$(this).attr("data-id");
formData.delete("pic_"+_index);//删除参数
pic.remove();//删除图片
})
xindex++;
});
});
//这里是循环单张上传图片,也可以自己一次性ajax批量上传多种图片,这里只是延续使用单图上传的服务接口
$(".ke-swfupload-startupload").bind('click',function(){
var i = formData.entries();
for(var pair of formData.entries()) {
//循环上传图片
var formData2 = new FormData();
formData2.append("name",pair[0]);//回调使用的图片名称
formData2.append("im
Kindeditor&.NET 实现多图上传保存
最新推荐文章于 2024-04-30 15:31:17 发布