springMVC3 ckeditor3.6 图片上传 JS回调
一、引入js文件
<script type="text/javascript" src="<%=base %>/resources/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="<%=base %>/resources/ckeditor/adapters/jquery.js"></script>
二、增加图片上传功能 uploadUrl为上传图片的servlet,或controller。 #editor1为textarea的id
<script type="text/javascript">
$(function(){
var config = {
filebrowserImageUploadUrl : '${uploadUrl}'
};
$('#editor1').ckeditor(config);
});
</script>
三、编写上传类,返回回调函数
/**图片上传
* @author Administrator
*
*/
@Controller
@RequestMapping("/upload.do")
public class FileUploadController {
@RequestMapping(method=RequestMethod.GET)
public String upload2(){
return "upload";
} @RequestMapping(method=RequestMethod.POST)
public void upload(MultipartFile upload,Integer CKEditorFuncNum,HttpServletRequest request,HttpServletResponse resp){
System.out.println("contentType="+upload.getContentType());
System.out.println("originalFilename="+upload.getOriginalFilename());
System.out.println("CKEditorFuncNum="+CKEditorFuncNum); if(!upload.isEmpty()&&upload.getContentType().startsWith("image/")){
File picFolder = createFolder(request);
String extName = "."+FileNameUtil.getExtensionName(upload.getOriginalFilename());
String picAbsPath = picFolder.getAbsoluteFile()+File.separator+RandomUtil.rndChars(6)+extName;
File picFile = new File(picAbsPath);
String picRelativePath=request.getContextPath()+"/upload/"+picFolder.getName()+"/"+picFile.getName() ;//服务器相对路径
System.out.println("picRelativePath="+picRelativePath);
try {
//保存图片
FileUtils.copyInputStreamToFile(upload.getInputStream(), picFile);
//返回数据
resp.setHeader("Content-type", "text/html;charset=UTF-8");
resp.setCharacterEncoding("UTF-8"); StringBuffer sb = new StringBuffer();
sb.append("<script type=\"text/javascript\">");
sb.append("window.parent.CKEDITOR.tools.callFunction("+CKEditorFuncNum+",'"+picRelativePath+"' , '上传成功!');");
sb.append("</script>");
resp.getWriter().write(sb.toString());
} catch (IOException e) {
e.printStackTrace();
}
}else{
System.out.println("没有选择图片文件");
}
} private File createFolder(HttpServletRequest request) {
//创建根文件夹
//File uploadFolderRoot = new File("D:/upload_file");
String uploadFolderRoot = request.getServletContext().getRealPath("/upload");
//创建日期文件夹
SimpleDateFormat date = new SimpleDateFormat("yyyy-MM-dd");
String dateFolder = date.format(new Date()); File uploadFile = new File(uploadFolderRoot, dateFolder);
if(!uploadFile.exists())uploadFile.mkdirs();
return uploadFile;
}
最主要的是这句
StringBuffer sb = new StringBuffer();
sb.append("<script type=\"text/javascript\">");
sb.append("window.parent.CKEDITOR.tools.callFunction("+CKEditorFuncNum+",'"+picRelativePath+"' , '上传成功!');");
sb.append("</script>"); 即回调的JS代码
CKEditorFuncNum是隐藏的表单项,传给了上传的servlet,而不是网上的0啊,1啊。。。
window.parent.CKEDITOR.tools.callFunction(a,b,c) 三个参数
a是CKEditorFuncNum
b是图片的访问url
c是提示消息 ------------------------------获取ckeditor里的数据
function checkForm(){
var con = CKEDITOR.instances.editor1.getData();
if($.trim(con)==""){
alert("请输入内容");
return false;
}
$("input[name=ckcontent]").val(con);
return true;
}
editor1为你所指定的textarea的id
<form action="${submitArticleUrl}" method="post" onsubmit="return checkForm()">
<textarea id="editor1" name="editor1"></textarea>
<p/>
<input type="hidden" name="ckcontent"/>
<input type="submit" value="添加"/>
</form>
在提交表单时处理,将editor的数据赋值给隐藏表单项即可
springMVC3 ckeditor3.6 图片上传 JS回调的更多相关文章
- 百度编辑器前后端二开图片上传Js Thinkphp tp5 ueditor
百度编辑器图片上传Jsueditor.all.min.js 下载链接 链接:https://pan.baidu.com/s/1VNgw9ELgRRHKeCQheFkQTw 提取码:fnfi 使用方法: ...
- 图片上传JS插件梳理与学习
项目的oper端和seller端,用了两个不同插件,简单了解一下: 一.seller端:AjaxUpload.js seller端使用的是 AjaxUpload.js ,封装好的一个库.调用时传入参数 ...
- 头像截取 图片上传 js插件
先看一下整体效果 页面html <div class="row"> <div class="tabs-container"> <u ...
- 图片上传js
var imgURL; function getImgURL(node) { try{ var file = null; if(node.files && node.files[0] ...
- js 利用iframe和location.hash跨域解决的方法,java图片上传回调JS函数跨域
奶奶的:折腾了我二天,最终攻克了!网上有非常多样例. 但跟我的都不太一样,费话不多说了,上图 上代码: IE ,firefix,chrome 測试通过 js :这个主页面,部分代码, functi ...
- 图片上传,支持同步/异步、预览(MVC、uploadify异步提交、js预览、ajaxSubmit异步提交)兼容大部分浏览器,含代码
图片上传代码,支持同步/异步和图片的预览 主要用了两种方式,可兼容大部分浏览器. 第一种使用uploadify异步上传,上传后返回图片路径显示到页面. 每二种使用ajaxSubmit异步上传,为兼容I ...
- 原生JS实现异步图片上传(预览)
效果 实现过程分为两步 1. 用户点击添加后通过 H5文件读取 FileReader对象以DataURL的格式读取图片 2. 通过FormData对象生成表单数据,通过ajax上传到后台 HTML & ...
- html + js 实现图片上传,压缩,预览及图片压缩后得到Blob对象继续上传问题
先上效果 上传图片后(设置了最多上传3张图片,三张后上传按钮消失) 点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正) html ...
- 图片上传前 压缩,base64图片压缩 Exif.js处理ios拍照倒置等问题
曾写过在前端把图片按比例压缩不失真上传服务器的前端和后台,可惜没有及时做总结保留代码,只记得js利用了base64位压缩和Exif.js进行图片处理,还有其中让我头疼的ios拍照上传后会倒置等诸多问题 ...
随机推荐
- C#判断文件及文件夹是否存在并创建(C#判断文件夹存在)
protected void Button1_Click(object sender, EventArgs e) { if (Directory.Exists(Server.MapPath(" ...
- JAVA获取时间戳,哪个更快
目前获取毫秒值大概有下面三种方法 //方法 一 System.currentTimeMillis(); //方法 二 Calendar.getInstance().getTimeInMillis(); ...
- libreoffice转office文档为pdf文档
libreoffice5.0 --invisible --convert-to pdf:writer_pdf_Export --outdir "/root/" "bb. ...
- 模型(modle)
MVC模式三:模型操作数据库,之后注册变量于模板,之后用控制器的dispaly()方法显示; 一.跨控制器调用方法 因为控制器的实质是类,所以在该方法中造一个要调用的类的对象,调用他的方法; 比如,在 ...
- 去掉IntelliJ IDEA的拼写检查
Settings→Editor→Inspections→Spelling 去掉Spelling下的Typo复选框即可 来自为知笔记(Wiz)
- CFLAGS,CPPFLAGS,CXXFLAGS in Makefile
CC 与 CXX: 这是 C 与 C++ 编译器命令.默认值一般是 “gcc” 与 “g++”. CPPFLAGS will be given to the C preprocessor ...
- Oracle11g中Exp命令空表不能导出的问题
http://www.jb51.net/article/43894.htm 一.不能导出空表的原因 1.Oracle11g默认对空表不分配segment,故使用exp导出Oracle11g数据库时,空 ...
- Android酷炫实用的开源框架(UI框架) 转
Android酷炫实用的开源框架(UI框架) 前言 忙碌的工作终于可以停息一段时间了,最近突然有一个想法,就是自己写一个app,所以找了一些合适开源控件,这样更加省时,再此分享给大家,希望能对大家有帮 ...
- codeforces 557 D. Vitaly and Cycle 组合数学 + 判断二分图
D. Vitaly and Cycle time limit per test 1 second memory limit per test 256 megabytes input sta ...
- dede各种运用[转]
文章正文页常用函数: 1.相应文章上下文调用: {dede:prenext function="str_replace(' 下一篇:','<'.'br'.' />下一篇: 2.文 ...