欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js控件Kindeditor實(shí)現(xiàn)圖片自動上傳功能

 更新時(shí)間:2020年07月20日 12:02:01   作者:Jaxu  
這篇文章主要為大家詳細(xì)介紹了js控件Kindeditor實(shí)現(xiàn)圖片自動上傳功能的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

Kindeditor是一款功能強(qiáng)大的開源在線HTML編輯器,支持所見即所得的編輯效果。它使用JavaScript編寫,可以無縫地與多個(gè)不同的語言環(huán)境進(jìn)行集成,如.NET、PHP、ASP、Java等。官方網(wǎng)站可以查看這里:http://kindeditor.net/index.php

Kindeditor本身提供了許多非常實(shí)用的插件,由于代碼開源,開發(fā)人員可以根據(jù)需要對其進(jìn)行任意擴(kuò)展和修改。

在使用Kindeditor編輯網(wǎng)站內(nèi)容時(shí)考慮這樣一個(gè)場景:編輯人員往往會從其它頁面或者Word文檔將內(nèi)容復(fù)制到Kindeditor編輯器中,而不會從一張白紙開始編寫內(nèi)容。如果所復(fù)制的內(nèi)容中包含圖片,則需要首先將圖片從源地址下載到本地,然后將其上傳到本網(wǎng)站所在的服務(wù)器,否則圖片仍然會指向你所復(fù)制的頁面或者文檔,這會導(dǎo)致圖片可能在頁面中無法正確打開。編輯人員往往要處理許多的文檔,這樣的操作無疑非常繁瑣。能否讓Kindeditor自動識別粘貼到其中的內(nèi)容,并將圖片自動上傳到服務(wù)器呢?下面的代碼實(shí)現(xiàn)了這一功能。

有關(guān)如何在頁面中使用Kindeditor可以去查看官方網(wǎng)站的文檔,這里不再詳細(xì)介紹。

實(shí)現(xiàn)該功能的基本思路:在Kindeditor編輯器的keyup事件中添加代碼,以檢查編輯器的內(nèi)容中是否包含圖片;找出需要自動上傳到服務(wù)器的圖片,通過Ajax方式調(diào)用圖片上傳程序?qū)D片上傳到服務(wù)器;在Ajax的回調(diào)函數(shù)中將對應(yīng)圖片的src地址修改為本地相對地址。

該功能不支持將Word中的圖片復(fù)制出來并上傳到服務(wù)器。 

上圖是最終實(shí)現(xiàn)效果。程序會自動識別編輯器中的內(nèi)容,如果有圖片需要上傳,則會在編輯器的頂部顯示一條提示信息。用戶點(diǎn)擊“上傳”鏈接,程序會通過Ajax請求調(diào)用圖片上傳程序,并在回調(diào)函數(shù)中將對應(yīng)圖片的src地址修改為本地相對地址。

具體實(shí)現(xiàn)步驟及相關(guān)代碼:

1. Kindeditor編輯器修改

找到kindeditor.js文件,在keyup()事件中添加自定義代碼。不同版本的Kindeditor所提供的代碼差別可能會比較大,需要借助于官方文檔進(jìn)行查找。本文基于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>您有圖片需要上傳到服務(wù)器</b>&nbsp;&nbsp;<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 + "張圖片已經(jīng)上傳成功!&nbsp;&nbsp;<a href='javascript:closeupload();'>關(guān)閉</a>");
  }
  else $("#confirm").text("上傳失??!");
 }
 });
}

其中的$(".ke-edit-iframe").contents().find("img")用來查找編輯器內(nèi)容中的所有圖片。默認(rèn)情況下,編輯器的內(nèi)容被存放在iframe元素中,該iframe擁有class="ke-edit-iframe"的屬性。程序會判斷每個(gè)圖片src屬性的值中是否包含"http://"或者"https://",從而確定該圖片是遠(yuǎn)程圖片還是本地圖片。如果圖片為遠(yuǎn)程圖片,則通過jQuery的ajax方法調(diào)用uploadpic.ashx將圖片上傳到服務(wù)器。同時(shí)在回調(diào)函數(shù)中修改對應(yīng)圖片的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;
 }
}

遠(yuǎn)程圖片通過WebClient方法下載到服務(wù)器的相對路徑"/uploads/image/"中,并且會按照日期自動生成文件夾和對應(yīng)的文件名。返回的結(jié)果中包含了以"|"分隔的所有圖片的本地相對地址,在步驟2的auto.js文件的uploadpic()函數(shù)中,回調(diào)方法success獲取到該值并進(jìn)行解析,將地址賦值給對應(yīng)圖片的src屬性。

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論