Kindeditor&.NET 实现多图上传保存

步骤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
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值