快捷導(dǎo)航

Java KindEditor粘貼圖片自動上傳到服務(wù)器功能實現(xiàn)

更新時間：2023年04月11日 16:36:06 作者：松鼠

這篇文章主要介紹了Java KindEditor粘貼圖片自動上傳到服務(wù)器功能實現(xiàn),本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

?圖片的復(fù)制無非有兩種方法，一種是圖片直接上傳到服務(wù)器，另外一種轉(zhuǎn)換成二進制流的base64碼
目前限chrome瀏覽器使用
首先以um-editor的二進制流保存為例：
打開umeditor.js，找到UM.plugins['autoupload']，然后找到autoUploadHandler方法，注釋掉其中的代碼。
加入下面的代碼：

//判斷剪貼板的內(nèi)容是否包含文本

//首先解釋一下為什么要判斷文本是不是為空

//在ctrl+c word中的文字或者圖片之后會返回1種(image/png)或者4種type(text/plain,text/html,text/rtf,image/png)類型的對象

//為了兼容4種格式的情況，做了如下的判斷

//如下代碼：e.originalEvent.clipboardData.items獲得剪貼板的內(nèi)容

//當(dāng)粘貼了文本之后text是不為空的，同時也會返回當(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);

              });

              //阻止默認事件, 避免重復(fù)添加;

              e.originalEvent.preventDefault();

             };

        }
}

兩個方法：

//執(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);

};

效果展示：

更多詳細資料可以參考這篇文章：

詳細思路及源碼

示例下載：

wordpaster-vue3-cli-ueditor1.5，wordpaster-vue-ueditor1.5，wordpaster-asp.net-ueditor1.5x，wordpaster-php-ueditor1x，wordpaster-jsp-ueditor1x?

到此這篇關(guān)于Java KindEditor粘貼圖片自動上傳到服務(wù)器的文章就介紹到這了,更多相關(guān) KindEditor粘貼自動上傳服務(wù)器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

javaweb開發(fā)提高效率利器JRebel詳解
這篇文章主要介紹了javaweb開發(fā)提高效率利器JRebel詳解,本文通過圖文并茂的形式給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-04-04
使用Java和SNMP4J實現(xiàn)SNMP操作完整代碼
這篇文章主要介紹了如何使用Java和SNMP4J庫進行SNMP操作,包括初始化SNMP、創(chuàng)建目標(biāo)、創(chuàng)建PDU、發(fā)送SNMP請求和處理響應(yīng)等內(nèi)容,通過編寫SnmpUtil類,展示了完整的SNMP操作流程,需要的朋友可以參考下
2024-12-12
用java實現(xiàn)學(xué)生信息管理系統(tǒng)
這篇文章主要為大家詳細介紹了java實現(xiàn)學(xué)生信息管理系統(tǒng)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-09-09
Unicode、UTF－8 和 ISO8859-1區(qū)別解析
這篇文章主要介紹了Unicode、UTF－8 和 ISO8859-1到底有什么區(qū)別,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-01-01
SpringMVC中的HandlerAdapter解析
這篇文章主要介紹了SpringMVC中的HandlerAdapter解析,HandlerAdapter是一個關(guān)鍵的組件,用于將請求與處理程序方法進行適配和調(diào)度,它充當(dāng)了控制器和處理程序之間的橋梁,負責(zé)將請求的參數(shù)和處理程序方法進行匹配,并將結(jié)果返回給前端,需要的朋友可以參考下
2023-10-10
lazy?init控制加載在Spring中如何實現(xiàn)源碼分析
這篇文章主要為大家介紹了lazy?init控制加載在Spring中如何實現(xiàn)源碼分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-09-09
java 保留兩位小數(shù)的幾種方法
這篇文章主要介紹了JAVA中小數(shù)點后保留兩位的幾種方法,并有小實例,希望能幫助有所需要的同學(xué)
2016-07-07
SpringBoot+Redis Bitmap實現(xiàn)活躍用戶統(tǒng)計
Redis的Bitmap數(shù)據(jù)結(jié)構(gòu)是一種緊湊的位圖,它可以用于實現(xiàn)各種場景,其中統(tǒng)計活躍用戶是一種經(jīng)典的業(yè)務(wù)場景,下面我們就來學(xué)習(xí)一下SpringBoot如何利用Redis中的Bitmap實現(xiàn)活躍用戶統(tǒng)計吧
2023-11-11
java.lang.OutOfMemoryError: Java heap space錯誤
本文主要介紹了java.lang.OutOfMemoryError: Java heap space錯誤的問題解決,包括內(nèi)存泄漏、數(shù)據(jù)過大和JVM堆大小配置不足,提供了解決方法,具有一定的參考價值,感興趣的可以了解一下
2025-03-03
SpringBoot實現(xiàn)防止XSS攻擊的示例詳解
這篇文章主要為大家詳細介紹了SpringBoot如何實現(xiàn)防止XSS攻擊,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-03-03