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 相关文章推荐
详解new function(){}和function(){}() 区别分析
Mar 22 Javascript
jQuery setTimeout()函数使用方法
Apr 07 Javascript
jQuery异步获取json数据方法汇总
Dec 22 Javascript
JavaScript常用的弹出广告及背投广告实现方法
Feb 06 Javascript
JavaScript DOM操作表格及样式
Apr 13 Javascript
JavaScript实现点击单元格改变背景色的方法
Feb 12 Javascript
BootStrap的JS插件之轮播效果案例详解
May 16 Javascript
微信jssdk用法汇总
Jul 16 Javascript
js 中获取制定的cook信息实现方法
Nov 19 Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 Javascript
纯JS实现轮播图
Feb 22 Javascript
JavaScript基础之this详解
Jun 04 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
自动跳转中英文页面
2006/10/09 PHP
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
PHP处理Oracle的CLOB实例
2014/11/03 PHP
php递归实现无限分类的方法
2015/07/28 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
PHP正则表达式处理函数(PCRE 函数)实例小结
2019/05/09 PHP
关于IE BUG与字符串截取substr的解决办法
2013/04/10 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
js获取通过ajax返回的map型的JSONArray的方法
2014/01/09 Javascript
javascript中递归函数用法注意点
2015/07/30 Javascript
在vue项目中安装使用Mint-UI的方法
2017/12/27 Javascript
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
详解vue-cli 2.0配置文件(小结)
2019/01/14 Javascript
详解vue中axios请求的封装
2019/04/08 Javascript
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
2019/11/04 jQuery
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
简单介绍Ruby中的CGI编程
2015/04/10 Python
Python文件读写保存操作的示例代码
2018/09/14 Python
python TF-IDF算法实现文本关键词提取
2019/05/29 Python
python障碍式期权定价公式
2019/07/19 Python
Python 文件操作之读取文件(read),文件指针与写入文件(write),文件打开方式示例
2019/09/29 Python
使用python绘制温度变化雷达图
2019/10/18 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
logging level级别介绍
2020/02/21 Python
HTML5在手机端实现视频全屏展示方法
2020/11/23 HTML / CSS
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
外贸学院会计专业应届生求职信
2013/11/14 职场文书
学校卫生检查制度
2014/02/03 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
法制工作总结2015
2015/07/23 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS