不使用默认的ueditor-mini.jar进行上传,自定义上传
关于UEditor的搭建我这里就不用细说了,这个官网的例子很详细
这里只说配置上传,使用的springmvc
首先找到umeditor.config.js,找到下面这样的代码
//为编辑器实例添加一个路径,这个不能被注释
UMEDITOR_HOME_URL : URL
//图片上传配置区
,imageUrl:URL+"jsp/imageUp.jsp" //图片上传提交地址
,imagePath:URL + "jsp/" //图片修正地址,引用了fixedImagePath,如有特殊需求,可自行配置
,imageFieldName:"upfile" //图片数据的key,若此处修改,需要在后台对应文件修改对应参数
现在来说一下上面的参数:
URL,这里指向的是你项目的ueditor文件夹
比如我的umeditor.js放在项目webroot/ueditor/umeditor.js这里,那么URL就是
HTTP://ip:port/webname/ueditor/,
当然具体的地址要根据你的配置文件而定
其中的imageFieldName:"upfile"这里的upfile就是<input type="file" name="upfile"/>这个upfile很重要,后台的数据就靠它获得,你这里修改了后台也要做相应处理
然后把上面的代码修改成指向自己写的contorller
//为编辑器实例添加一个路径,这个不能被注释
UMEDITOR_HOME_URL : URL
//图片上传配置区
,imageUrl:root+"/upload/img" //图片上传提交地址
// ,imageUrl:URL+"jsp/imageUp.jsp" //图片上传提交地址
// ,imagePath:URL + "jsp/" //图片修正地址,引用了fixedImagePath,如有特殊需求,可自行配置
// 这里的imagePath就是下面的_file方法
// 其路径是root/upload/file/+result.url,result是上传返回的json
,imagePath:root + "/upload/file/"
,imageFieldName:"upfile" //图片数据的key,若此处修改,需要在后台对应文件修改对应参数
里面的root是项目的根路径
/upload/img就是后台的controller处理地址
/upload/file/也是后台的处理地址,这个这里有一点要注意,我在controller里说明
接下来是/upload/img的controller
/**
* @upfile 就是上面提到的upfile,要对应一致
*/
@RequestMapping("/upload/img")
@ResponseBody
public String upload(@RequestParam("upfile") MultipartFile upfile,HttpServletRequest request, HttpServletResponse response) throws Exception {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String result = "";
if(path == null) {
System.out.println(">> the get file path error!");
return result;
}
FileOutputStream out = null;
try {
// 存放路径,如果不存在则创建路径
File file = new File(rootPath);
if(!file.exists()) file.mkdirs();
// 随机生成文件名,oname是原始文件名称
String fname = randomName(),
oname = upfile.getOriginalFilename();
out = new FileOutputStream(rootPath + "/" + fname);
out.write(upfile.getBytes());
out.close();
//{"name":"10571402926855858.jpg", "originalName": "china.jpg", "size": 43086, "state": "SUCCESS", "type": ".jpg", "url": "upload/20140616/10571402926855858.jpg"}
// result返回的url参照IndexController._file方法
result = "{\"name\":\""+ fname +"\", \"originalName\": \""+ oname +"\", \"size\": "+ upfile.getSize() +", \"state\": \"SUCCESS\", \"type\": \""+FileUtils.getExt(oname)+"\", \"url\": \""+path + "_" + fname+"\"}";
result = result.replaceAll( "\\\\", "\\\\" );
} catch(Exception e) {
} finally {
out.close();
}
return result;
}
这就是上传的controller处理方法,里面只有2点注意:
1)就是result的返回格式,可以参照官方的例子
2)就是result返回的url,这个具体说明请往下看
/**
* 获得图片
* @param path 图片路径:140615_xxx,格式为:datedir_filename
* @param request
* @param response
*/
@RequestMapping(value = "/file/{path}")
public @ResponseBody
void _file(@PathVariable String path, HttpServletRequest request, HttpServletResponse response) {
// 这个path就是上面result的url
// 因为我是多层目录所以就使用了_下划线代替/
// 主要就是注意路径要对应一致就行了
path = path.replaceAll("_", "/");
FileInputStream in = null;
OutputStream out = null;
try {
File file = new File(rootPath + path);
in = new FileInputStream(file);
byte[] b = new byte[(int) file.length()];
in.read(b);
in.close();
response.setContentType("image/*");
out = response.getOutputStream();
out.write(b);
out.flush();
out.close();
} catch (IllegalArgumentException e) {
e.printStackTrace();
} catch (SecurityException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
} finally {
try {
if (in != null)
in.close();
if (out != null)
out.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
分享到:
相关推荐
基于springboot完整的实现了ueditor前后台的代码,只要你稍微了解一点ueditor就可以了,下来后直接导入开发工具中运行就行了
这个文档可以完美解决!ueditor前端出钱后端配置的问题
百度编辑器ueditor结合七牛云图片上传相结合,修改本地上传到七牛云,只需改动核心文件Upload.class.php的配置引入即可使用。配置改为你自己七牛云的key值和地址,空间名。我的访问地址为私有空间的访问地址,如果你...
Ueditor上传文件demo-Java版 ,基于原版本修改,只需要UEditor下的js和配置,不需要导入jar包, 不再使用controller.jsp , 可以自定义图片上传路径,位置 。 ...
ossEndPoint ueditor显示图片的访问域名 ossCliendEndPoint 阿里云文件存储的endpoint,在仓库概览里面可以看到 useCDN true/false是否启用cdn加速 cdnEndPoint cdn加速域名配置 useLocalStorager 是否启用本地存储 ...
java带进度条的多文件上传 支持html5和flash ueditor 配置正确 可以使用 上传使用的是百度的webuploader
springboot整合ueditor,由于项目是springcloud分布式项目,注册中心和其他服务未上传,下载的同学看代码路径和配置即可.资料参考地址: https://blog.csdn.net/a1053765496/article/details/105965560
springboot和ueditor的整合,下载下来只需要修改index.html中的地址就可以。具体搭建的步骤在:https://www.jianshu.com/p/231e83c13610 中,大家可以参考。
该教程用于百度ueditor1.4.3jsp utf-8版使用时配置指导。仅对于初步使用者图片上传遇到困难的人或想将图片上传至数据库的的人适用。
详细介绍 ueditor 的使用和开发方法 ,包括与java server端集成,上传配置, 还对有一些可能遇到的问题,提供解决方案,比如:乱码、上传文件位置
百度编辑框_JAVA_jsp配置文档, 可以上传图片,可以上传图片,可以上传图片
springmvc mybatis freemarker
3、富文本编辑器,集成的是kindeditor,本来想集成百度的Ueditor的,配置起来没这个简单,呵呵,注意,本人的电脑foxfire浏览器无法多图上传,360浏览器可以,应该是跟flash有关 4、过滤器,在java中好像叫拦截器 ...
以后台友情链接功能为例,增删改查、校验、图片上传等功能及相关页面,仅需12行代码完成最普通的单表(友情链接页面) 2、官方JSTL模板。前台模板采用官方的JSTL,不需要额外学习其他模板如FreeMarker、Smarty或...
其中使用了javamail、Gson、jspSmartUpload以及百度的ueditor进行邮件收发、json数据生成、图片上传、文件编辑等主要功能。本系统的主要功能:文章信息发布功能、商品信息发布、商品的购买和预订、用户个人信息管理...
Excel工具类 Word工具类 Java NIO实现socket工具类 分布式session jdk升级到1.7 嵌入式redis服务(只支持linux) 1.0.13 修改默认的beanName生成策略,controller参数扩展 1.0.14 分布式session使用zookeeper 1.0.15 ...
开发技术:Spring3.2,Struts2.3,Hibernate3,bootstrap样式,bootstrap脚本,jquery脚本,layer弹窗组件,ueditor富文本框,webuploader文件上传组件,echarts图表展示组件等技术; 二、项目说明 本系统实现了...
ssi项目,项目菜单,角色权限可动态配置。论坛功能的实现,快递api,天气appi,百度Ueditor api,百度地图api等的使用,批量上传,下载。以及html解析工具jsoup的使用,encache缓存的使用等
5.具有能提供一键式打包、解包、上传、下载、无配置式布署的自由开放的智能模板市场。6.提供手机端模块进行服务器及网站状态实时状态监测。7.提供了防重式文件上传模块。通过上传文件去重复功能,避免了不必要的空间...
Excel工具类 Word工具类 Java NIO实现socket工具类 分布式session jdk升级到1.7 嵌入式redis服务(只支持linux) 1.0.13 修改默认的beanName生成策略,controller参数扩展 1.0.14 分布式session使用zookeeper 1.0.15 ...