kindeditor4.1.x版本已支持圖片批量上傳,不過傳統的選文件上傳的方式依然效率低下。
很多時候,編輯人員可能需要將一個文檔中圖片上傳到網上,那麼,按照傳統的上傳方法,他必須先將圖片另存爲到本機,再用編輯器的上傳選擇文件進行上傳。
這個過程至少要做這幾個動作:在文檔中圖片上點右鍵 -> 點另存爲 -> 選擇目錄 -> 點保存。上傳時:點上傳按鈕 -> 選擇目錄 -> 選擇文件。
可以看到,上傳一張圖片是十分繁瑣的工作,特別時在選擇目錄的時候,那個小小的文件瀏覽器界面和千篇一律的文件夾定位,能使人抓狂。
網站編輯人員經常問我能不能從word中直接複製圖片粘貼上傳?
這個問題我自己也有疑問。帶着這個疑問查閱了一些資料,經過學習研究,最終發現,通過很小的代碼量就可以實現這個功能。
於是我對kindeditor進行了一下“擴展”。chrome61下測試通過。
----------------------
通過搜索引擎查閱了一些資料,發現用最新瀏覽器技術是可以無障礙實現這個想法的。
大體要求及流程是:
1.編寫paste粘貼事件的監聽處理。
2.從剪切板獲取數據。
3.ajax二進制上傳。
4.顯示到編輯器裏。
實現思路是運用kindeditor提供的api+javascript代碼結合實現。
把代碼寫到kindeditor的創建與初始化配置中,最終代碼(可重點故關注註釋):
kindeEditor = KindEditor.create('#updatePapers_contentEditor', {
/***
* 圖片上傳必須使用絕對路徑,因爲KindeEditor有個缺陷,
* 它的批量上傳和單個上傳界面文件在不同級別的目錄下,
* 用相對路徑時,總是隻能成功一種模式,另一種就不會成功,所以只能這樣用絕對路徑.
*/
uploadJson : '/fileupload',//服務器文件上傳接收程序路徑
urlType : '',
resizeType:0,
//調用kindeditor的afterCreate回調函數對kindeditor功能進行“擴展”,實現圖片粘貼上傳。
afterCreate:function() {
var editerDoc = this.edit.doc;//得到編輯器的文檔對象
//監聽粘貼事件, 包括右鍵粘貼和ctrl+v
$(editerDoc).bind('paste', null, function (e) {
/*獲得操作系統剪切板裏的項目,e即kindeditor,
*kindeditor創建了originalEvent(源事件)對象,
*並指向了瀏覽器的事件對象,而chrome瀏覽器
*需要通過clipboardData(剪貼板數據)對象的items
*獲得複製的圖片數據。
*/
var ele = e.originalEvent.clipboardData.items;
for (var i = 0; i < ele.length; ++i) {
//判斷文件類型
if ( ele[i].kind == 'file' && ele[i].type.indexOf('image/') !== -1 ) {
var file = ele[i].getAsFile();//得到二進制數據
//創建表單對象,建立name=value的表單數據。
var formData = new FormData();
formData.append("imgFile",file);//name,value
//用jquery Ajax 上傳二進制數據
$.ajax({
url : '/fileupload?dir=image',
type : 'POST',
data : formData,
// 告訴jQuery不要去處理髮送的數據
processData : false,
// 告訴jQuery不要去設置Content-Type請求頭
contentType : false,
dataType:"json",
beforeSend:function(){
//console.log("正在進行,請稍候");
},
success : function(responseStr) {
//上傳完之後,生成圖片標籤回顯圖片,假定服務器返回url。
var src = responseStr.url;
var imgTag = "<img src='"+src+"' border='0'/>";
//console.info(imgTag);
//kindeditor提供了一個在焦點位置插入HTML的函數,調用此函數即可。
kindeEditor.insertHtml(imgTag);
},
error : function(responseStr) {
console.log("error");
}
});
}
}
});
}
});
功能雖然有了,但是功能並不是很細緻,實際應用中可能還要考慮壓縮,圖片尺寸縮略。不過這些對於新一代瀏覽器都不是問題了,都有現成的api調用,可以直接實現。
另外,還不知道其他瀏覽器(IE9以上、Firefox、Safari等)是否能用。
我在搜索“瀏覽器粘貼上傳”,發現了知乎上的一篇探討:
《知乎回答問題編輯框用 Ctrl+V 粘貼圖片是如何實現的?》https://www.zhihu.com/question/20893119
裏面有幾位大牛的代碼非常吸引我,給了我實現這個功能的最基本要素。