这篇文章主要介绍了 js 控件 Kindeditor 实现图片自动上传功能 的相关资料, 需要的朋友可以参考下
KindEditor 是一套开源的 html 可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容 IE、Firefox、Chrome、Safari、Opera 等主流浏览器。KindEditor 使用 JavaScript 编写,可以无缝的于 Java、.NET、PHP、ASP 等程序接合。
Kindeditor 是一款功能强大的开源在线 HTML 编辑器,支持所见即所得的编辑效果。它使用 JavaScript 编写,可以无缝地与多个不同的语言环境进行集成,如. NET、PHP、ASP、Java 等。官方网站可以查看这里:{aa0aa}
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");
- 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 属性。
来源: http://www.phperz.com/article/17/0331/264907.html