首先要贊一下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
里面有幾位大牛的代碼非常吸引我，給了我實現這個功能的最基本要素。