Java KindEditor粘贴图片自动上传到服务器功能实现

2024-10-02 20:31:23

图片的复制无非有两种方法，一种是图片直接上传到服务器，另外一种转换成二进制流的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粘贴自动上传服务器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Kindeditor单独调用单图上传增加预览功能的实例

html代码: <p><input type="hidden" id="url1" name="IDCardPicture1" value="" /> <input type="button" id="image1" value="选择图片" style="width: 150px;height: 30px;" /&g
KindEditor在php环境下上传图片功能集成的方法示例

KindEditor 是一套开源的在线HTML编辑器, 后台可与 Java..NET.PHP.ASP 等程序集成.为实现图文混排的编辑效果,我们通常都会用到编辑器的图片上传功能,本文会简单讲一下KinEditor的基本使用,主要说明如何在php环境下,集成编辑器的图片上传功能! KindEditor 官方下载:http://kindeditor.net/down.php KindEditor 编辑器的基本使用:http://kindeditor.net/docs/usage.html KindE
springmvc+kindeditor文件上传实例详解

本文实例为大家分享了springmvc+kindeditor文件上传的具体代码,供大家参考,具体内容如下下载kindeditor 压缩包里面的jar放到tomcat的lib文件夹下,kindeditor文件放工程里,不用的可以删掉 jsp页面 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ ta
SpringMVC KindEditor在线编辑器之文件上传代码实例

最近几个项目都要用到在线编辑器,由于之前做在线编辑器都只在php上,对于用java尤其是springmvc框架时,似乎并不如PHP那么简单,搜集了很多博文和资料,全部都不能达到效果,最后在参考各种资料后,自己花时间写了一个上传图片的控制器,亲测保证能用. 1.图片上传控制器 package com.xishan.yueke.view.system; import java.io.File; import java.io.IOException; import java.io.PrintWrite
Kindeditor单独调用多图上传实例

html代码: <input type="button" id="J_selectImage" value="图片上传" /> <div id="J_imageView"> <?php foreach($imgs as $row):?> <div class="img_view"><img class='iYuUpload-View' src='/Upl
Java KindEditor粘贴图片自动上传到服务器功能实现

图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码.加入下面的代码: //判断剪贴板的内容是否包含文本 //首先解释一下为什么要判断文本是不是为空 //在ctrl+c word中的文字或者图片之后会返回1种(image/png)或者4种t
js控件Kindeditor实现图片自动上传功能

Kindeditor是一款功能强大的开源在线HTML编辑器,支持所见即所得的编辑效果.它使用JavaScript编写,可以无缝地与多个不同的语言环境进行集成,如.NET.PHP.ASP.Java等.官方网站可以查看这里:http://kindeditor.net/index.php Kindeditor本身提供了许多非常实用的插件,由于代码开源,开发人员可以根据需要对其进行任意扩展和修改. 在使用Kindeditor编辑网站内容时考虑这样一个场景:编辑人员往往会从其它页面或者Word文档将内容复
java实现简单图片上传下载功能

本文实例为大家分享了java实现简单图片上传下载的具体代码,供大家参考,具体内容如下 1.首先在上传图片界面:将form表单的enctype改为:multipart/form-data 2.定义一个实体类用来将存放图片存放的路径存入到mysql中private String imgpath; 3.在spring容器中注入处理图片的解析器 <bean name="multipartResolver" class="org.springframework.web.multi
Java如何实现图片裁剪预览功能

在项目中,我们需要做些类似头像上传,图片裁剪的功能,ok看下面文章! 需要插件:jQuery Jcrop 后端代码: package org.csg.upload; import java.awt.Rectangle; import java.awt.image.BufferedImage; import java.io.File; import java.io.FileInputStream; import java.io.IOException; import java.util.Itera
Java实现图片上传至服务器功能（FTP协议）

本文为大家分享了java实现图片上传至服务器功能的具体代码,供大家参考,具体内容如下本案例实现图片上传功能分为两个步骤,分别为 (1)APP用base64加密将图片内容上传至服务器(http协议),在临时目录中先存储好图片: (2)将服务器临时存储的图片用FTP协议上传至另一台专门用做存储图片的服务器: /** * ftp 文件操作服务实现类 * */ @Service public class FtpFileServiceImpl implements IFtpFileService { /
java 实现微信服务器下载图片到自己服务器

java 实现微信服务器下载图片到自己服务器此功能的实现需要注意java 中IO流的操作及网路开发, 实现代码: /** * @author why * */ public class PicDownload { /** * * 根据文件id下载文件 * * * * @param mediaId * * 媒体id * * @throws Exception */ public static InputStream getInputStream(String accessToken, Stri
java实现多文件上传至本地服务器功能

博主最近在做一个内网项目,内部可以访问外部数据,但是外部访问不了内部数据,这也就造成了可能文件无法上传,所以博主另辟蹊径,在本地服务器上建立一个文件夹专门用来存储上传数据. 环境:jdk,tomcat 一.前台上传文件(ajax上传) <input type="file" name="annexUrl" id="annexUrl" multiple="multiple"/> 其中multiple="mul
java实现多图片上传功能

本文实例为大家分享了java实现多图片上传功能的具体代码,供大家参考,具体内容如下开发环境:jdk1.7,MyEclipse10 框架用的是spring.用到了maven工具(maven的包百度下就可以). 四步完成,全部复制改参数就可以第一步:先在Spring中对图片进行限制  <bean id="multipartResolver" class="org.
Java 实现实时监听文件夹是否有新文件增加并上传服务器功能

本文中主要陈述一种实时监听文件夹中是否有文件增加的功能,可用于实际文件上传功能的开发. 主要实现方式: (1)利用Timer的定时循环执行代码的功能: (2)利用WatchService实时监听文件夹是否有新文件增加,通过阻塞式IO流实现文件上传服务器. 代码如下: private static String path = "E:\\Kankan"; public static void getFile() throws FileNotFoundException, IOExc
java实现的图片裁剪功能示例

本文实例讲述了java实现的图片裁剪功能.分享给大家供大家参考,具体如下: PicCut.java: package Tsets; import java.awt.Rectangle; import java.awt.image.BufferedImage; import java.io.File; import java.io.FileInputStream; import java.io.IOException; import java.util.Iterator; import javax

Java KindEditor粘贴图片自动上传到服务器功能实现

相关推荐

随机推荐