Java KindEditor粘貼圖片自動上傳到服務器功能實現
圖片的復制無非有兩種方法,一種是圖片直接上傳到服務器,另外一種轉換成二進制流的base64碼
目前限chrome瀏覽器使用
首先以um-editor的二進制流保存為例:
打開umeditor.js,找到UM.plugins['autoupload'],然後找到autoUploadHandler方法,註釋掉其中的代碼。
加入下面的代碼:
//判斷剪貼板的內容是否包含文本 //首先解釋一下為什麼要判斷文本是不是為空 //在ctrl+c word中的文字或者圖片之後會返回1種(image/png)或者4種type(text/plain,text/html,text/rtf,image/png)類型的對象 //為瞭兼容4種格式的情況,做瞭如下的判斷 //如下代碼:e.originalEvent.clipboardData.items獲得剪貼板的內容 //當粘貼瞭文本之後text是不為空的,同時也會返回當前文本的圖片類型 //如果有文字的話不做任何的處理,如果隻粘貼圖片的話文本一定是空的,包括復制的桌面圖片或者截圖的圖片 var text = e.originalEvent.clipboardData.getData("text"); if(text == ""){ var items=e.originalEvent.clipboardData.items; for (var i = 0, len = items.length; i < len; i++) { var item = items[i]; if ( item.kind == 'file' && item.type.indexOf('image/') !== -1 ) { var blob = item.getAsFile(); getBase64(blob, function( base64 ) { //sendAndInsertImage(base64,me); 上傳到服務器 setBase64Image(base64,me); }); //阻止默認事件, 避免重復添加; e.originalEvent.preventDefault(); }; } }
兩個方法:
//執行插入圖片的操作 function setBase64Image(base64,editor){ editor.execCommand('insertimage', {src: base64,_src: base64}); } //獲得base64 function getBase64(blob, callback) { var a = new FileReader(); a.onload = function(e) {callback(e.target.result);}; a.readAsDataURL(blob); };
效果展示:
更多詳細資料可以參考這篇文章:
詳細思路及源碼
示例下載:
wordpaster-vue3-cli-ueditor1.5,wordpaster-vue-ueditor1.5,wordpaster-asp.net-ueditor1.5x,wordpaster-php-ueditor1x,wordpaster-jsp-ueditor1x
到此這篇關於Java KindEditor粘貼圖片自動上傳到服務器的文章就介紹到這瞭,更多相關 KindEditor粘貼自動上傳服務器內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!