[轉]Kindeditor圖片粘貼上傳(chrome)

原文地址:https://www.cnblogs.com/jsper/p/7608004.html

首先要贊一下kindeditor，一個十分強大的國產開源web-editor組件。

---

 

kindeditor4.1.x版本已支持圖片批量上傳，不過傳統的選文件上傳的方式依然效率低下。

不少時候，編輯人員可能須要將一個文檔中圖片上傳到網上，那麼，按照傳統的上傳方法，他必須先將圖片另存爲到本機，再用編輯器的上傳選擇文件進行上傳。

這個過程至少要作這幾個動做：在文檔中圖片上點右鍵 -> 點另存爲 -> 選擇目錄 -> 點保存。上傳時：點上傳按鈕 -> 選擇目錄 -> 選擇文件。

能夠看到，上傳一張圖片是十分繁瑣的工做，特別時在選擇目錄的時候，那個小小的文件瀏覽器界面和千篇一概的文件夾定位，能令人抓狂。

網站編輯人員常常問我能不能從word中直接複製圖片粘貼上傳？

這個問題我本身也有疑問。帶着這個疑問查閱了一些資料，通過學習研究，最終發現，經過很小的代碼量就能夠實現這個功能。

因而我對kindeditor進行了一下「擴展」。chrome61下測試經過。

---

 

經過搜索引擎查閱了一些資料，發現用最新瀏覽器技術是能夠無障礙實現這個想法的。

大致要求及流程是：

1.編寫paste粘貼事件的監聽處理。

2.從剪切板獲取數據。

3.ajax二進制上傳。

4.顯示到編輯器裏。

實現思路是運用kindeditor提供的api+javascript代碼結合實現。

把代碼寫到kindeditor的建立與初始化配置中，最終代碼（可重點故關注註釋）：

 1 kindeEditor = KindEditor.create('#updatePapers_contentEditor', {
 2 
 3     /***
 4      * 圖片上傳必須使用絕對路徑,由於KindeEditor有個缺陷,
 5      * 它的批量上傳和單個上傳界面文件在不一樣級別的目錄下,
 6      * 用相對路徑時,老是隻能成功一種模式,另外一種就不會成功,因此只能這樣用絕對路徑.
 7      */
 8     uploadJson : '/fileupload',//服務器文件上傳接收程序路徑
 9     urlType : '',
10     resizeType:0,
11     //調用kindeditor的afterCreate回調函數對kindeditor功能進行「擴展」，實現圖片粘貼上傳。
12     afterCreate:function() {
13         var editerDoc = this.edit.doc;//獲得編輯器的文檔對象
14         //監聽粘貼事件, 包括右鍵粘貼和ctrl+v
15         $(editerDoc).bind('paste', null, function (e) { 
16             /*得到操做系統剪切板裏的項目，e即kindeditor,
17              *kindeditor建立了originalEvent(源事件)對象，
18              *並指向了瀏覽器的事件對象，而chrome瀏覽器
19              *須要經過clipboardData(剪貼板數據)對象的items
20              *得到複製的圖片數據。
21              */
22             var ele = e.originalEvent.clipboardData.items;
23             for (var i = 0; i < ele.length; ++i) {
24                 //判斷文件類型
25                 if ( ele[i].kind == 'file' && ele[i].type.indexOf('image/') !== -1 ) {
26                     var file = ele[i].getAsFile();//獲得二進制數據
27                     //建立表單對象，創建name=value的表單數據。
28                     var formData = new FormData();
29                     formData.append("imgFile",file);//name,value
30 
31                     //用jquery Ajax 上傳二進制數據
32                     $.ajax({
33                         url : '/fileupload?dir=image',
34                         type : 'POST',
35                         data : formData,
36                         // 告訴jQuery不要去處理髮送的數據
37                         processData : false,
38                         // 告訴jQuery不要去設置Content-Type請求頭
39                         contentType : false,
40                         dataType:"json",
41                         beforeSend:function(){
42                             //console.log("正在進行，請稍候");
43                         },
44                         success : function(responseStr) {
45                             //上傳完以後，生成圖片標籤回顯圖片，假定服務器返回url。
46                             var src = responseStr.url;
47                             var imgTag = "<img src='"+src+"' border='0'/>";
48 
49                             //console.info(imgTag);
50                             //kindeditor提供了一個在焦點位置插入HTML的函數，調用此函數便可。
51                             kindeEditor.insertHtml(imgTag);
52 
53 
54                         },
55                         error : function(responseStr) {
56                             console.log("error");
57                         }
58                     });
59 
60                 }
61 
62             }
63 
64 
65         });
66     }
67 });                                    

功能雖然有了，可是功能並非很細緻，實際應用中可能還要考慮壓縮，圖片尺寸縮略。不過這些對於新一代瀏覽器都不是問題了，都有現成的api調用，能夠直接實現。

另外，還不知道其餘瀏覽器（IE9以上、Firefox、Safari等）是否能用。

我在搜索「瀏覽器粘貼上傳」，發現了知乎上的一篇探討：

 《知乎回答問題編輯框用 Ctrl+V 粘貼圖片是如何實現的？》https://www.zhihu.com/question/20893119

裏面有幾位大牛的代碼很是吸引我，給了我實現這個功能的最基本要素。