运维开发网

控件js实现自动上传,图片的功能教程

运维开发网 https://www.qedev.com 2022-05-07 16:58 出处:网络
这篇文章主要为大家详细介绍了js控件Kindeditor实现图片自动上传功能的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

这篇文章主要为大家详细介绍了js控件Kindeditor实现图片自动上传功能的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

Kindeditor是一款功能强大的开源在线HTML编辑器,支持所见即所得的编辑效果。它是用JavaScript编写的,可以与许多不同的语言环境无缝集成,比如。NET,PHP,ASP,Java等。官网可以看这里:http://kindeditor.net/index.php

Kindeditor本身提供了很多非常实用的插件。由于代码是开源的,开发者可以根据需要对其进行扩展和修改。

用Kindeditor编辑网站内容时,可以考虑这样一个场景:编辑人员经常会将其他页面或Word文档中的内容复制到Kindeditor中,而不是从一张白纸上写内容。如果复制的内容包含图片,需要先将图片从源地址下载到本地,然后上传到本网站所在的服务器。否则,图片仍将指向您复制的页面或文档,这可能导致图片无法在页面中正确打开。编辑经常要处理很多文档,这无疑是非常繁琐的。Kindeditor能否自动识别粘贴进去的内容,自动将图片上传到服务器?下面的代码实现了这个函数。

如何使用页面中的Kindeditor来查看官网的文档,这里就不详细描述了。

实现该功能的基本思路是:在Kindeditor编辑器的keyup事件中添加代码,检查编辑器的内容是否包含图片;找出需要自动上传到服务器的图片,调用图片上传程序通过Ajax将图片上传到服务器;在Ajax的回调函数中,将对应图片的src地址修改为本地相对地址。

此功能不支持在Word中复制图片并上传到服务器。


上图是最后的效果。该程序会自动识别编辑器中的内容,如果有图片要上传,编辑器顶部会显示一条消息。当用户点击“上传”链接时,程序会通过Ajax请求调用图片上传程序,在回调函数中将对应图片的src地址修改为本地相对地址。

具体实施步骤及相关代码:

1.修改类编辑器编辑器

找到kindeditor.js文件,并在keyup()事件中添加自定义代码。不同版本的Kindeditor提供的代码可能差别很大,需要通过官方文档进行搜索。本文基于kind editor 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 = "lt;input type='text' id='piclist' value='' style='display:none;'/gt;lt;div id='upload'gt;lt;bgt;您有图片需要上传到服务器lt;/bgt;amp;;amp;;lt;a href='javascript:uploadpic();' gt;上传lt;/agt;lt;/divgt;lt;div id='confirm'gt;lt;/divgt;"; $(".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://") gt;= 0 || that.attr("src").indexOf("https://") gt;= 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 gt; 0) #63; "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://") gt;= 0 || that.attr("src").indexOf("https://") gt;= 0) { that.attr("src", "/uploads/image/" + str[i]); that.attr("data-ke-src", "/uploads/image/" + str[i]); } }); $("#confirm").html(img.length + "张图片已经上传成功!amp;;amp;;lt;a href='javascript:closeupload();'gt;关闭lt;/agt;"); } else $("#confirm").text("上传失败!"); } });}

其中的$(".ke-edit-iframe").contents().find("img")用来查找编辑器内容中的所有图片。默认情况下,编辑器的内容被存放在iframe元素中,该iframe拥有class="ke-edit-iframe"的属性。程序会判断每个图片src属性的值中是否包含"http://"或者"https://",从而确定该图片是远程图片还是本地图片。如果图片为远程图片,则通过jQuery的ajax方法调用uploadpic.ashx将图片上传到服务器。同时在回调函数中修改对应图片的src地址。其中$(”。ke-edit-iframe”)。内容()。find ("img ")用于查找编辑器内容中的所有图片。默认情况下,编辑器的内容存储在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 lt; arr.Length; i++) { if (arr[i].IndexOf("http://") gt;= 0 || arr[i].IndexOf("https://") gt;= 0) { string std = st.SaveUrlPics(arr[i], "../../uploads/image/"); if (std.Length gt; 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文件的upload()函数中,回调方法success获取这个值并解析它,将地址赋给相应图片的src属性。

这就是本文的全部内容。希望对大家的学习有帮助,也希望大家能支持一下

0

精彩评论

暂无评论...
验证码 换一张
取 消