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


Posted in Javascript onJuly 20, 2020

Kindeditor是一款功能强大的开源在线HTML编辑器,支持所见即所得的编辑效果。它使用JavaScript编写,可以无缝地与多个不同的语言环境进行集成,如.NET、PHP、ASP、Java等。官方网站可以查看这里:http://kindeditor.net/index.php

Kindeditor本身提供了许多非常实用的插件,由于代码开源,开发人员可以根据需要对其进行任意扩展和修改。

在使用Kindeditor编辑网站内容时考虑这样一个场景:编辑人员往往会从其它页面或者Word文档将内容复制到Kindeditor编辑器中,而不会从一张白纸开始编写内容。如果所复制的内容中包含图片,则需要首先将图片从源地址下载到本地,然后将其上传到本网站所在的服务器,否则图片仍然会指向你所复制的页面或者文档,这会导致图片可能在页面中无法正确打开。编辑人员往往要处理许多的文档,这样的操作无疑非常繁琐。能否让Kindeditor自动识别粘贴到其中的内容,并将图片自动上传到服务器呢?下面的代码实现了这一功能。

有关如何在页面中使用Kindeditor可以去查看官方网站的文档,这里不再详细介绍。

实现该功能的基本思路:在Kindeditor编辑器的keyup事件中添加代码,以检查编辑器的内容中是否包含图片;找出需要自动上传到服务器的图片,通过Ajax方式调用图片上传程序将图片上传到服务器;在Ajax的回调函数中将对应图片的src地址修改为本地相对地址。

该功能不支持将Word中的图片复制出来并上传到服务器。 

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

上图是最终实现效果。程序会自动识别编辑器中的内容,如果有图片需要上传,则会在编辑器的顶部显示一条提示信息。用户点击“上传”链接,程序会通过Ajax请求调用图片上传程序,并在回调函数中将对应图片的src地址修改为本地相对地址。

具体实现步骤及相关代码:

1. Kindeditor编辑器修改

找到kindeditor.js文件,在keyup()事件中添加自定义代码。不同版本的Kindeditor所提供的代码差别可能会比较大,需要借助于官方文档进行查找。本文基于Kindeditor 4.1.10版本。 

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

2. auto.js文件代码 

function df() {
 var haspicContainer = document.getElementById("has_pic");
 if (haspicContainer == null) {
 haspicContainer = document.createElement("div");
 haspicContainer.id = "has_pic";
 haspicContainer.innerHTML = "<input type='text' id='piclist' value='' style='display:none;'/><div id='upload'><b>您有图片需要上传到服务器</b>  <a href='javascript:uploadpic();' >上传</a></div><div id='confirm'></div>";
 $(".ke-toolbar").after(haspicContainer);
 }

 var img = $(".ke-edit-iframe").contents().find("img");

 var piccount = 0;
 var sstr = "";
 $(img).each(function (i) {
 var that = $(this);
 if (that.attr("src").indexOf("http://") >= 0 || that.attr("src").indexOf("https://") >= 0) {
  piccount++;
  if (i == $(img).length - 1)
  sstr += that.attr("src");
  else
  sstr += that.attr("src") + "|";
 }
 });

 $("#piclist").val(sstr);
 document.getElementById("has_pic").style.display = (piccount > 0) ? "block" : "none";
}

function closeupload() {
 $("#has_pic").hide();
 $("#upload").show();
}

function uploadpic() {
 var piclist = encodeURI($("#piclist").val());
 if (piclist.length == 0) return false;

 $.ajax({
 url: "asp.net/uploadpic.ashx",
 data: "pic=" + piclist,
 type: "GET",
 beforeSend: function () {
  $("#upload").hide();
  $("#confirm").text("正在上传中...");
 },
 success: function (msg) {
  if (msg !== "") {
  var str = new Array();
  str = msg.split('|');
  var img = $(".ke-edit-iframe").contents().find("img");

  $(img).each(function (i) {
   var that = $(this);
   if (that.attr("src").indexOf("http://") >= 0 || that.attr("src").indexOf("https://") >= 0) {
   that.attr("src", "/uploads/image/" + str[i]);
   that.attr("data-ke-src", "/uploads/image/" + str[i]);
   }
  });

  $("#confirm").html(img.length + "张图片已经上传成功!  <a href='javascript:closeupload();'>关闭</a>");
  }
  else $("#confirm").text("上传失败!");
 }
 });
}

其中的$(".ke-edit-iframe").contents().find("img")用来查找编辑器内容中的所有图片。默认情况下,编辑器的内容被存放在iframe元素中,该iframe拥有class="ke-edit-iframe"的属性。程序会判断每个图片src属性的值中是否包含"http://"或者"https://",从而确定该图片是远程图片还是本地图片。如果图片为远程图片,则通过jQuery的ajax方法调用uploadpic.ashx将图片上传到服务器。同时在回调函数中修改对应图片的src地址。

3. uploadpic.ashx文件代码

public class uploadpic : IHttpHandler
{
 public void ProcessRequest(HttpContext context)
 {
 context.Response.ContentType = "text/plain";
 string pic = context.Request.QueryString["pic"];

 string[] arr = pic.Split('|');
 string sstr = "";
 UpLoadIMG st = new UpLoadIMG();
 for (int i = 0; i < arr.Length; i++)
 {
  if (arr[i].IndexOf("http://") >= 0 || arr[i].IndexOf("https://") >= 0)
  {
  string std = st.SaveUrlPics(arr[i], "../../uploads/image/");
  if (std.Length > 0)
  {
   if (i == arr.Length - 1)
   sstr += std;
   else
   sstr += std + "|";
  }
  }
 }
 context.Response.Write(sstr);
 }

 public bool IsReusable
 {
 get
 {
  return false;
 }
 }
}

public class UpLoadIMG
{
 public string SaveUrlPics(string imgurlAry, string path)
 {
 string strHTML = "";
 string dirPath = HttpContext.Current.Server.MapPath(path);

 try
 {
  if (!Directory.Exists(dirPath))
  {
  Directory.CreateDirectory(dirPath);
  }
  string ymd = DateTime.Now.ToString("yyyyMMdd", DateTimeFormatInfo.InvariantInfo);
  dirPath += ymd + "/";
  if (!Directory.Exists(dirPath))
  {
  Directory.CreateDirectory(dirPath);
  }
  string newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + imgurlAry.Substring(imgurlAry.LastIndexOf("."));

  WebClient wc = new WebClient();
  wc.DownloadFile(imgurlAry, dirPath + newFileName);
  strHTML = ymd + "/" + newFileName;
 }
 catch (Exception ex)
 {
  //return ex.Message;
 }
 return strHTML;
 }
}

远程图片通过WebClient方法下载到服务器的相对路径"/uploads/image/"中,并且会按照日期自动生成文件夹和对应的文件名。返回的结果中包含了以"|"分隔的所有图片的本地相对地址,在步骤2的auto.js文件的uploadpic()函数中,回调方法success获取到该值并进行解析,将地址赋值给对应图片的src属性。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript正则表达式中参数g(全局)的作用
Nov 11 Javascript
javascript Array对象基础知识小结
Nov 16 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
Apr 03 Javascript
jQuery 选择器详解
Jan 19 Javascript
javascript中replace( )方法的使用
Apr 24 Javascript
AngularJs bootstrap搭载前台框架——准备工作
Sep 01 Javascript
原生js仿jquery实现对Ajax的封装
Oct 04 Javascript
node.js中axios使用心得总结
Nov 29 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 Javascript
JavaScript 面向对象基础简单示例
Oct 02 Javascript
JS控制GIF图片的停止与显示
Oct 24 Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 #Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 #Javascript
jQuery实现手机自定义弹出输入框
Jun 13 #Javascript
实例讲解JavaScript中的this指向错误解决方法
Jun 13 #Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
Jun 13 #Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
Jun 13 #Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
Jun 13 #Javascript
You might like
在命令行下运行PHP脚本[带参数]的方法
2010/01/22 PHP
php实现简单洗牌算法
2013/06/18 PHP
php实现快速排序的三种方法分享
2014/03/12 PHP
php使用glob函数快速查询指定目录文件的方法
2014/11/15 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
PHP使用zlib扩展实现GZIP压缩输出的方法详解
2018/04/09 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
jQuery实现淡入淡出二级下拉导航菜单的方法
2015/08/28 Javascript
jQuery遍历DOM节点操作之filter()方法详解
2016/04/14 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
JavaScript对象_动力节点Java学院整理
2017/06/23 Javascript
three.js中3D视野的缩放实现代码
2017/11/16 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
微信小程序实现炫酷的弹出式菜单特效
2019/01/28 Javascript
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
JS forEach跳出循环2种实现方法
2020/06/24 Javascript
[46:10]2014 DOTA2国际邀请赛中国区预选赛 CnB VS HGT
2014/05/21 DOTA
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
对于Python深浅拷贝的理解
2019/07/29 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
世界上最大的乐器零售商:Guitar Center
2017/11/07 全球购物
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
有影响力的人、名人和艺术家的官方商品:Represent
2019/11/26 全球购物
Linux面试经常问的文件系统操作命令
2015/11/05 面试题
毕业生简单求职信
2013/11/19 职场文书
无工作经验者个人求职信范文
2013/12/22 职场文书
大学四年职业生涯规划书范文
2014/01/02 职场文书
病人家属写给医院的感谢信
2015/01/23 职场文书
中学生自我评价2015
2015/03/03 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
业务员管理制度范本
2015/08/06 职场文书
使用python绘制横竖条形图
2022/04/21 Python