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编辑器修改

  找到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属性。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Kindeditor单独调用多图上传实例

    html代码: <input type="button" id="J_selectImage" value="图片上传" /> <div id="J_imageView"> <?php foreach($imgs as $row):?> <div class="img_view"><img class='iYuUpload-View' src='/Upl

  • Kindeditor单独调用单图上传增加预览功能的实例

    html代码: <p><input type="hidden" id="url1" name="IDCardPicture1" value="" /> <input type="button" id="image1" value="选择图片" style="width: 150px;height: 30px;" /&g

  • js控件Kindeditor实现图片自动上传功能

    Kindeditor是一款功能强大的开源在线HTML编辑器,支持所见即所得的编辑效果.它使用JavaScript编写,可以无缝地与多个不同的语言环境进行集成,如.NET.PHP.ASP.Java等.官方网站可以查看这里:http://kindeditor.net/index.php Kindeditor本身提供了许多非常实用的插件,由于代码开源,开发人员可以根据需要对其进行任意扩展和修改. 在使用Kindeditor编辑网站内容时考虑这样一个场景:编辑人员往往会从其它页面或者Word文档将内容复

  • Java KindEditor粘贴图片自动上传到服务器功能实现

    ​图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码.加入下面的代码: //判断剪贴板的内容是否包含文本 //首先解释一下为什么要判断文本是不是为空 //在ctrl+c word中的文字或者图片之后会返回1种(image/png)或者4种t

  • iOS应用开发中使用UIScrollView控件来实现图片缩放

    一.知识点简单介绍 1.UIScrollView控件是什么? (1)移动设备的屏幕⼤大⼩小是极其有限的,因此直接展⽰示在⽤用户眼前的内容也相当有限 (2)当展⽰示的内容较多,超出⼀一个屏幕时,⽤用户可通过滚动⼿手势来查看屏幕以外的内容 (3)普通的UIView不具备滚动功能,不能显⽰示过多的内容 (4)UIScrollView是一个能够滚动的视图控件,可以⽤用来展⽰示⼤大量的内容,并且可以通过滚 动查看所有的内容 (5)  举例:手机上的"设置".其他⽰示例程序 2.UIScrollV

  • ASP.NET My97DatePicker日期控件实现OA日期记事功能

    My97DatePicker日期控件是一个非常好用的日期控件,功能非常优秀的日期控件. 对实现页面刷新完善的很好,用日期控件时可以有比较好的享受,这次的OA日期记事功能也得益于此控件,具体效果图如下: 部分代码: Default页布局一个Calendar日期控件 <div> <asp:Calendar ID="Calendar1" runat="server" Width="100%" ShowGridLines="T

  • JS 控件事件小结

    概述: 事件对于控件来说至关重要,控件的消息通信机制使用事件的成本最低,但是对于JS控件来说有一些麻烦需要解决,JS类本身不支持事件,DOM模型支持的事件仅适应于浏览器的DOM节点.所以创建一套事件是我们写控件之前要做的. 事件机制 对于事件的机制我不想多说,各种语言中对事件的描述都很具体,都是观察者模式的一种实现,我们可以从中抽取出事件必须的接口(由于控件库是基于jQuery 所以接口跟jquery保持一致): 1.on: 绑定事件 2.off: 删除事件 3.fire: 触发事件 4.add

  • python调用短信猫控件实现发短信功能实例

    python调用短信猫控件实现发短信功能实例代码如下所示: #! /usr/bin/env python #coding=gbk import sys import win32com.client ocxname='ShouYan_SmsGate61.Smsgate' axocx=win32com.client.Dispatch(ocxname) axocx.CommPort=8#设置COM端口号 axocx.SmsService='+8613800100500'#设置短信服务号码 axocx.

  • JS控件的生命周期介绍

    JS控件的生命周期跟其他平台UI的生命周期类似,但是又有自己的特点,我们只有将控件的生命周期划分清晰,所有的控件编写.mixins的编写和plugin的编写才能遵循控件的生命周期做统一的管理.在这里我把JS的生命周期定义为4部分: 1.initializer: 初始化,做一些不牵扯DOM操作的初始化操作 2.createDom: 创建 DOM,在这个过程中我们创建控件需要的DOM结构 3.renderUI: 生成控件的内部元素,在这里调用子控件的渲染方法,开启子控件的生命周期 4.bindUI:

  • C#使用FileSystemWatcher控件实现的文件监控功能示例

    本文实例讲述了C#使用FileSystemWatcher控件实现的文件监控功能.分享给大家供大家参考,具体如下: FileSystemWatcher 可以使用FileSystemWatcher组件监视文件系统,并对文件系统的改变作出反应.通过使用FileSystemWatcher组件,在特定的文件或目录被创建.修改或删除时,可以快速和便捷地启动业务流程. 例如,如果一组用户在合作处理一个存储在服务器共享目录下的文档时,可以使用FileSystemWatcher组件编写应用程序来监视对共享目录的更

  • 用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法

    如下所示: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> <script type="text/javascript"> funct

  • Android编程实现GridView控件点击图片变暗效果的方法

    本文实例讲述了Android编程实现GridView控件点击图片变暗效果的方法.分享给大家供大家参考,具体如下: @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); grid = (GridView) findViewById(R.id.grid); grid.setAdapte

随机推荐