ckeditor java 上传_CKEditor粘贴图片自动上传到服务器(Java版)
环境:java,springmvc,ckeditor,tomcat,maven
情况:在做项目的时候发现本地图片粘贴到ckeditor中,img标签的src中的值是“data:image/png;base64,”开头的,后面会跟一串字符串,图片越大字符串越长,这样的图片在保存的时候一旦放多了过后,后台不知什么原因拿不到其它的参数,所以想把这种图片上传到后台在显示出来。研究了一天的发觉还是挺简单的,主要是ckeditor怎么获取img并获取src 。下面看一下代码。
流程:监听change事件-》获取图片的二进制数据,将base64图片转换成formData再提交到服务器-》服务器接收上传的文件,生成图片到指定位置,并返回图片的访问地址-》js接收回调数据,获得图片url-》将获得的url地址替换掉图片的二进制数据
1,定义一个textarea
${article.content}
2,js方法
//粘贴图片上传
//延时加载uploadImage方法,否则被默认方法覆盖
$(function(){setTimeout(uplaodImage,400);});
//使用FormData形式,将base64图片转换成formData再提交(图片不限制大小)
function uplaodImage(){
CKEDITOR.instances.content.on('change',function(e){//content为textarea的id
var a = e.editor.document ;
var b = a.find("img");
var count = b.count();
for(var i=0;i
var src =b.getItem(i).$.src;//获取img的src
if(src.substring(0,10)=='data:image'){ //判断是否是二进制图像,是才处理
var img1=src.split(',')[1];
var img2=window.atob(img1);
alert('img2 size='+img2.length);
var ia = new Uint8Array(img2.length);
for (var x = 0; x < img2.length; x++) {
ia[x] = img2.charCodeAt(x);
};
//获得图片的类型
var w1=src.indexOf(":");//获得指定字符的第一个下标值
var w2=src.indexOf(";");
var imgType= src.substring(w1+1, w2);//返回一个包含从 start 到最后(不包含 end )的子字符串的字符串
var blob=new Blob([ia], {type:imgType});
var formdata=new FormData();
formdata.append('croppedImage',blob);
$.ajax({
type:"POST",
url:"${baseurl}article/uploadImage.action",//服务器url
async:false,//同步,因为修改编辑器内容的时候会多次调用change方法,所以要同步,否则会多次调用后台
data:formdata,
processData: false,
contentType: false,
success:function(json){
var imgurl=json.resultInfo.sysdata.url; //获取回传的图片url
//alert('返回的url='+imgurl);
//获取并更改到现有的图片标签src的值
b.getItem(i).$.src=imgurl;
var a = CKEDITOR.instances.content.document.$.getElementsByTagName("img")[i]; //content为textarea的id
a.setAttribute('data-cke-saved-src',imgurl);
}
});
}
}
});
}
3,后台方法
/**
* ckeditor粘贴图片上传并返回访问路径(不限制图片大小)
* @param imgfile 图片文件
* @return
*/
@RequestMapping(value = "uploadImage", method = RequestMethod.POST)
public @ResponseBody SubmitResultInfo uploadImage(@RequestParam("croppedImage") MultipartFile imgfile) {
try {
//获取 文件后缀
String fileSuffixes =imgfile.getContentType().split("/")[1];// data:image/png
// 生成文件名称
Calendar cal = Calendar.getInstance();
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSSS");
String filename = sdf.format(cal.getTime());
// 生成图片保存路径
String filePath = "E:/temp/tempfile" + "/" + filename + "." + fileSuffixes;
// 图片访问路径
String fileurl = "http://localhost:5080/upimg/" + filename + "." + fileSuffixes;
System.out.println("fileurl=" + fileurl);
// 写文件到磁盘
File newFile = new File(filePath);
imgfile.transferTo(newFile);
//返回url
ResultInfo resultInfo = ResultUtil.createSuccess(Config.MESSAGE, 906, null);
resultInfo.getSysdata().put("url", fileurl);//返回的图片访问路径
return ResultUtil.createSubmitResult(resultInfo);
} catch (Exception e) {
e.printStackTrace();
return ResultUtil.createSubmitResult(ResultUtil.createSuccess(Config.MESSAGE, 911, null));//500错误
}
}
4,其它环境配置
4.1在spinrg-mvc.xml中配置配置上传解析器
4.2,pom.xml引入依赖
commons-fileupload
commons-fileupload
1.3.1
4.3,配置图片的虚拟路径,如
部分参考:http://blog.csdn.net/modernzcl/article/details/18365151
ckeditor java 上传_CKEditor粘贴图片自动上传到服务器(Java版)相关推荐
- java xheditor 上传图片_xhEditor粘贴图片自动上传到服务器(Java版)
由于工作需要必须将word文档内容粘贴到编辑器中使用 但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直 ...
- 百度编辑器图片上传 java_百度编辑器粘贴图片自动上传到服务器(Java版)
Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧? Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能.但是无 ...
- 织梦CMS粘贴图片自动上传到服务器(Java版)
如何做到 ueditor批量上传word图片? 1.前端引用代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
- umeditor粘贴图片自动上传到服务器(Java版)
当前功能基于PHP,其它语言流程大致相同 1.新增上传word json配置 在ueditor\php\config.json中新增如下配置: /* 上传word配置 */ "wordAct ...
- ckeditor 4 上传和插入图片
本文内容 FineUI ckeditor fckeditor/ckeditor 演示 ckeditor 4.2.1 上传&插入图片 最近看了一下 FineUI_v3.3.1 控件,对里边的 c ...
- java上传并压缩图片(等比例压缩或者原尺寸压缩)
先看效果: 原图:1.33M 处理后:27.4kb 关键代码; package codeGenerate.util;import java.awt.Color; import java.awt.Gra ...
- java上传过大图片超时_解决.net项目中上传的图片或者文件太大无法上传问题
最近做项目的时候 用户提出要上传大图片 一张图片有可能十几兆 本来用的第三方的上传控件 有限制图片上传大小的设置 以前设置的是2M 按照用户的要求 以为直接将限制图片上传大小的设置改下就可 ...
- File Struct 上传JPG格式图片变成tmp 服务器上传文件名字随机起
今天在写ssh框架中上传图片的代码,解决了一部分,然后卡在了图片上传之后的文件名不一致,就像随机取的.从我上传的jpg格式变成了tmp. 格式是不对了,但是文件内容并没有发生变化,说明文件是上传成功了 ...
- java微信上传本地视频教程_java微信开发之上传下载多媒体文件,java上传下载_PHP教程...
java微信开发之上传下载多媒体文件,java上传下载 回复图片.音频.视频消息都是需要media_id的,这个是需要将多媒体文件上传到微信服务器才有的. 将多媒体文件上传到微信服务器,以及从微信服务 ...
最新文章
- 帆软所有销量为0的显示为空值_市场上最流行的9款跨境电商亚马逊销量预估工具精准度报告详解!...
- 福布斯发布2019全球品牌价值100强:华为上榜苹果夺冠
- [网络流24题]最小路径覆盖问题
- sqlserver常用函数/存储过程/数据库角色
- oauth2 token为空拦截_feign之间传递oauth2-token的问题和解决
- 样式与include标签的使用及样式的继承和使用
- 优秀的模糊测试代码是如何炼成的?
- 拓端tecdat|R语言使用蒙特卡洛模拟进行正态性检验及可视化
- 网盘助手插件chrome插件
- 终极算法:机器学习和人工智能如何重塑世界笔记
- DOS入门教程。DOS的特点,DOS命令格式
- 常见的HTTP状态码以及代表的意义
- 城市应急处置系统实施目标
- Mybatis(1)——Mybatis Generator自动生成代码
- 用卷积神经网络和自注意力机制实现QANet(问答网络)
- 【杂谈】给瑞典的曾先生:出门在外,低调行事
- PnP解算及SolvePnp用法
- C语言 第八章 函数
- [cesium] | 地形挖方分析
- 股市神童”胡立阳:股市赚钱的人都不“正常
热门文章
- Centos7 使用Docker 安装Oracle 截图+关键步骤说明
- (vue基础试炼_02)使用vue.js实现隔2秒显示不同内容
- android线性布局快捷键,【整理】Android图形界面知识学习与总结之:Linear Layout线性布局...
- python os.path.splitext()的用法_Python常用模块之os.path
- qt设置鼠标追踪后,鼠标还是需要点击后才能变样式
- C语言 指针 p++ / p-- - C语言零基础入门教程
- Python str / bytes / unicode 区别详解 - Python零基础入门教程
- Python 字符串/列表/元组/字典之间的相互转换 - Python零基础入门教程
- BugkuCTF-Reverse题First_Mobile(xman)
- python动态_python --动态类型