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 = ElementById("has_pic");
if (haspicContainer == null) {
haspicContainer = ateElement("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("") >= 0 || that.attr("src").indexOf("") >= 0) {
piccount++;
if (i == $(img).length - 1)
sstr += that.attr("src");
else
sstr += that.attr("src") + "|";
}
});
$("#piclist").val(sstr);
}
function closeupload() {
$("#has_pic").hide();
$("#upload").show();
}
function uploadpic() {
var piclist = encodeURI($("#piclist").val());
if (piclist.length == 0) return false;
$.ajax({
url: "asp/uploadpic.ashx",
data: "pic=" + piclist,
type: "GET",
beforeSend: function () {
$("#upload").hide();
$("#confirm").text("正在上传中...");
},
jquery在线图片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("") >= 0 || that.attr("src").indexOf("") >= 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属性的值中是否包含""或者""，从⽽确定该图⽚是远程图⽚还是本地图⽚。如果图⽚为远程图⽚，则通过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("") >= 0 || arr[i].IndexOf("") >= 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属性。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论