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 document.referrer 用法
Apr 30 Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
js计算系统当前日期是星期几的方法
Jul 14 Javascript
浅谈javascript中的三种弹窗
Oct 21 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
May 12 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 Javascript
微信小程序实现自定义modal弹窗封装的方法
Jun 15 Javascript
记一次vue-webpack项目优化实践详解
Feb 17 Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 Javascript
Vue ​v-model相关知识总结
Jan 28 Vue.js
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
融入意大利的咖啡文化
2021/03/03 咖啡文化
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
修改php.ini实现Mysql导入数据库文件最大限制的修改方法
2007/12/11 PHP
PHP字符串处理的10个简单方法
2010/06/30 PHP
Yii控制器中操作视图js的方法
2016/07/04 PHP
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
jQuery中[attribute!=value]选择器用法实例
2014/12/31 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
js 函数性能比较方法
2020/08/24 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
python解析文件示例
2014/01/23 Python
Python selenium模拟手动操作实现无人值守刷积分功能
2020/05/13 Python
使用TensorBoard进行超参数优化的实现
2020/07/06 Python
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
解决HTML5手机端页面缩放的问题
2017/10/27 HTML / CSS
学校联谊活动方案
2014/02/15 职场文书
元旦活动感言
2014/03/08 职场文书
酒店采购员岗位职责
2014/03/14 职场文书
《宋庆龄故居的樟树》教学反思
2014/04/07 职场文书
教师一岗双责责任书
2014/04/16 职场文书
《画家乡》教学反思
2014/04/22 职场文书
银行青年文明号事迹材料
2014/05/31 职场文书
土建工程师岗位职责
2014/06/10 职场文书
质量月口号
2014/06/20 职场文书
小学数学教师研修感悟
2015/11/18 职场文书
2015元旦感言
2015/12/09 职场文书
音乐课《小猫钓鱼》教学反思
2016/02/18 职场文书
创业计划书之o2o水果店
2019/08/30 职场文书
导游词之湖北武当山
2019/09/23 职场文书
用python开发一款操作MySQL的小工具
2021/05/12 Python
Java设计模式之享元模式示例详解
2022/03/03 Java/Android