js控件Kindeditor实现图⽚⾃动上传功能Kindeditor本⾝提供了许多⾮常实⽤的插件，由于代码开源，开发⼈员可以根据需要对其进⾏任意扩展和修改。
在使⽤Kindeditor编辑⽹站内容时考虑这样⼀个场景：编辑⼈员往往会从其它页⾯或者Word⽂档将内容复制到Kindeditor编辑器中，⽽不会从⼀张⽩纸开始编写内容。
如果所复制的内容中包含图⽚，则需要⾸先将图⽚从源地址下载到本地，然后将其上传到本⽹站所在的服务器，否则图⽚仍然会指向你所复制的页⾯或者⽂档，这会导致图⽚可能在页⾯中⽆法正确打开。
编辑⼈员往往要处理许多的⽂档，这样的操作⽆疑⾮常繁琐。
能否让Kindeditor⾃动识别粘贴到其中的内容，并将图⽚⾃动上传到服务器呢？下⾯的代码实现了这⼀功能。
有关如何在页⾯中使⽤Kindeditor可以去查看官⽅⽹站的⽂档，这⾥不再详细介绍。
实现该功能的基本思路：在Kindeditor编辑器的keyup事件中添加代码，以检查编辑器的内容中是否包含图⽚；找出需要⾃动上传到服务器的图⽚，通过Ajax⽅式调⽤图⽚上传程序将图⽚上传到服务器；在Ajax的回调函数中将对应图⽚的src地址修改为本地相对地址。
该功能不⽀持将Word中的图⽚复制出来并上传到服务器。
上图是最终实现效果。
程序会⾃动识别编辑器中的内容，如果有图⽚需要上传，则会在编辑器的顶部显⽰⼀条提⽰信息。
⽤户点击“上传”链接，程序会通过Ajax请求调⽤图⽚上传程序，并在回调函数中将对应图⽚的src地址修改为本地相对地址。
具体实现步骤及相关代码：1. Kindeditor编辑器修改找到kindeditor.js⽂件，在keyup()事件中添加⾃定义代码。
不同版本的Kindeditor所提供的代码差别可能会⽐较⼤，需要借助于官⽅⽂档进⾏查找。
本⽂基于Kindeditor 4.1.10版本。
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");elsesstr += 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: "/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")⽤来查找编辑器内容中的所有图⽚。
