Java KindEditor粘貼圖片自動(dòng)上傳到服務(wù)器功能實(shí)現(xiàn)
?圖片的復(fù)制無非有兩種方法,一種是圖片直接上傳到服務(wù)器,另外一種轉(zhuǎn)換成二進(jìn)制流的base64碼
目前限chrome瀏覽器使用
首先以um-editor的二進(jìn)制流保存為例:
打開umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注釋掉其中的代碼。
加入下面的代碼:
//判斷剪貼板的內(nèi)容是否包含文本 //首先解釋一下為什么要判斷文本是不是為空 //在ctrl+c word中的文字或者圖片之后會(huì)返回1種(image/png)或者4種type(text/plain,text/html,text/rtf,image/png)類型的對象 //為了兼容4種格式的情況,做了如下的判斷 //如下代碼:e.originalEvent.clipboardData.items獲得剪貼板的內(nèi)容 //當(dāng)粘貼了文本之后text是不為空的,同時(shí)也會(huì)返回當(dāng)前文本的圖片類型 //如果有文字的話不做任何的處理,如果只粘貼圖片的話文本一定是空的,包括復(fù)制的桌面圖片或者截圖的圖片 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); 上傳到服務(wù)器 setBase64Image(base64,me); }); //阻止默認(rèn)事件, 避免重復(fù)添加; e.originalEvent.preventDefault(); }; } }
兩個(gè)方法:
//執(zhí)行插入圖片的操作 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); };
效果展示:
更多詳細(xì)資料可以參考這篇文章:
示例下載:
wordpaster-vue3-cli-ueditor1.5,wordpaster-vue-ueditor1.5,wordpaster-asp.net-ueditor1.5x,wordpaster-php-ueditor1x,wordpaster-jsp-ueditor1x?
到此這篇關(guān)于Java KindEditor粘貼圖片自動(dòng)上傳到服務(wù)器的文章就介紹到這了,更多相關(guān) KindEditor粘貼自動(dòng)上傳服務(wù)器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解Spring MVC攔截器實(shí)現(xiàn)session控制
這篇文章主要介紹了詳解Spring MVC攔截器實(shí)現(xiàn)session控制,使用session監(jiān)聽,重復(fù)登錄后,強(qiáng)制之前登錄的session過期。有興趣的可以了解一下。2017-01-01springBoot之如何獲取接口請求數(shù)據(jù)和返回?cái)?shù)據(jù)實(shí)現(xiàn)日志
這篇文章主要介紹了springBoot之如何獲取接口請求數(shù)據(jù)和返回?cái)?shù)據(jù)實(shí)現(xiàn)日志問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04Java設(shè)計(jì)模式之代理模式(Proxy模式)介紹
這篇文章主要介紹了Java設(shè)計(jì)模式之代理模式(Proxy模式)介紹,本文講解了為什么要使用代理模式、如何使用代理模式等內(nèi)容,需要的朋友可以參考下2015-03-03springboot讀取nacos配置文件的實(shí)現(xiàn)
SpringBoot注冊服務(wù)到Nacos上,由Nacos來做服務(wù)的管理,本文主要介紹了springboot讀取nacos配置文件的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05Javaweb 鼠標(biāo)移入移出表格顏色變化的實(shí)現(xiàn)
這篇文章主要介紹了Javaweb 鼠標(biāo)移入移出表格顏色變化的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09修改xml文件再也不用重啟項(xiàng)目mybatis-xmlreload方法
這篇文章主要為大家介紹了修改xml文件再也不用重啟項(xiàng)目mybatis-xmlreload,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03詳解Java動(dòng)態(tài)加載數(shù)據(jù)庫驅(qū)動(dòng)
本篇文章主要介紹了詳解Java動(dòng)態(tài)加載數(shù)據(jù)庫驅(qū)動(dòng),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05