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继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
Aug 16 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
Feb 27 Javascript
JavaScript Math 对象常用方法总结
Apr 28 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
Sep 28 Javascript
原生JS和jQuery操作DOM对比总结
Jan 19 Javascript
VUE实现日历组件功能
Mar 13 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
Oct 17 Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 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获取Google AJAX Search API 数据的代码
2010/03/12 PHP
php 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
PHP扩展模块Pecl、Pear以及Perl的区别
2014/04/09 PHP
php调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
PHP+Ajax简单get验证操作示例
2019/03/02 PHP
面向对象的编程思想在javascript中的运用上部
2009/11/20 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
JS实现判断碰撞的方法
2015/02/11 Javascript
JavaScript中的getTime()方法使用详解
2015/06/10 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
2017/11/27 Javascript
JavaScript 跨域之POST实现方法
2018/05/07 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
javascript Canvas动态粒子连线
2020/01/01 Javascript
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
python抓取网页时字符集转换问题处理方案分享
2014/06/19 Python
python列表操作实例
2015/01/14 Python
Python操作CouchDB数据库简单示例
2015/03/10 Python
搞笑的程序猿:看看你是哪种Python程序员
2015/06/12 Python
Python守护进程和脚本单例运行详解
2017/01/06 Python
Python3实现取图片中特定的像素替换指定的颜色示例
2019/01/24 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
python实现多线程端口扫描
2019/08/31 Python
python中使用paramiko模块并实现远程连接服务器执行上传下载功能
2020/02/29 Python
linux 下selenium chrome使用详解
2020/04/02 Python
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
详解h5页面在不同ios设备上的问题总结
2019/03/01 HTML / CSS
添柏岚英国官方网站:Timberland英国
2019/11/28 全球购物
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
优秀实习生主要事迹
2014/05/29 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
人为什么会“幸灾乐祸”?
2019/08/06 职场文书
鸿蒙3.0体验感怎么样? 鸿蒙3.0系统评测向
2022/08/14 数码科技