ueditor1.4.3 springmvc图片上传

ueditor:百度富文本编辑器,地址:ueditor.baidu.com

版本选择,之所以选择1.4.3,是因为ueditor 1.4.2才修复在bootstrap环境下图片拖拽异常,看到1.4.3也修复了不少的bug,没敢使用1.4.2,稍微看了下源码,1.4.3里面很多todo注释,ueditor一直在改进,不太成熟,既然这么多bug,为什么要选ueditor做富文本编辑?这个看项目组大神了,小喽啰没法做技术引入,如果有选择,不太建议用ueditor商用,bug比较多,当然使用简单也是个有点。

配置使用:

1,需导入jar包(当然一般项目commons都有)

2,ueditor.config.js

该文件定义了ueditor的请求入口和toolbar功能,这个文件对使用来说可以不用修改,想删除不用的功能的话,修改数组即可

3,ueditor.all.js

ueditor通过getActionUrl获取路径,修改这个方法配置图片上传路径

其中getServerName是获取上下文路径的js,自行修正路径

action有

  • uploadimage://执行上传图片或截图的action名称
  • uploadscrawl://执行上传涂鸦的action名称
  • uploadvideo://执行上传视频的action名称
  • uploadfile://controller里,执行上传视频的action名称
  • catchimage://执行抓取远程图片的action名称
  • listimage://执行列出图片的action名称
  • listfile://执行列出文件的action名称

具体参见百度文档:http://fex.baidu.com/ueditor/#qa-customurl

4,congroller.jsp

ueditor请求入口,需要的话,应该可以修改成springmvc 控制器,未测试

5,图片上传Controller

public String ueditImageUpload(@RequestParam(value = "upfile", required = false) MultipartFile upfile) {

// 上传图片

//返回数据

}

注:返回数据为json串,内容如下:

public class UploaderParam {
    private String name; //通过upfile获取
    private String originalName; //通过upfile获取
    private Long size; //通过upfile获取
    private String state;//成功必须为"SUCCESS"
    private String type; //通过upfile获取
    private String url; //图片回显url

自行拼凑json

6,config.json

项目中图片保存在一个静态资源服务器,所以这里设置空前缀,自行修改

7,一切就绪部署上,即可

时间: 2024-08-26 19:45:36

ueditor1.4.3 springmvc图片上传的相关文章

springmvc图片上传

//-------------------------------------上传图片--------------------------------------------------- @RequestMapping(value="upload2.action" ) public String upload2(HttpServletRequest request,HttpServletResponse response) throws IllegalStateException,

springmvc图片上传(兼容ie8以上,实时预览)

html代码: <form id="uploadform" method="post" enctype="multipart/form-data"> <table> <tr> <td><span class="need">   </span>新闻图片:</td> <td width="100" align="

springmvc图片上传、json

springmvc的图片上传 1.导入相应的pom依赖 <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.3</version> </dependency> 2.添加springmvc-servlet.xml里面的配置 <bean id=&q

springMVC图片上传的处理方式

首先需要依赖的jar包: <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>1.3.2</version> </dependency> <dependency> <groupId>commons-fileupload</groupId> <art

jsp+ajax+springMvc图片上传立刻回显 电商

思路:onchange()事件触发异步请求,js将成功后返回图片的地址动态写入 JSP页面:  外层一个ID为myForm的表单 <pre name="code" class="html"> <a name="uploadImgs" id="uploadImgs"></a> <p><label><samp>*</samp>上传产品图片(XX尺寸

妈蛋:kinMaxShow轮播图异常,WebUploader图片上传坑爹,图片被压缩了

今天晚上在改造轮播图. 原来的代码是这样的: <div> <img src="${static}/image/index/banner/`.jpg" /> </div> <div> <img src="${static}/image/index/banner/2.jpg" /> </div> <div> <img src="${static}/image/index/

妈蛋:kinMaxShow旋转木马异常,WebUploader图片上传坑爹,图像被压缩

今天晚上在改造轮播图. 原来的代码是这种: <div> <img src="${static}/image/index/banner/`.jpg" /> </div> <div> <img src="${static}/image/index/banner/2.jpg" /> </div> <div> <img src="${static}/image/index/b

JavaWeb图片上传的几种方式

一.图片上传介绍 JavaWeb方向编程过程中,实现图片上传有三种方式: 1.传统的基于springMVC的MultipartFile类实现图片上传. 2.基于Ajax的图片上传. 3.基于Base64压缩的图片上传. 二.springMVC图片上传(springboot通用) 此方法的优点是可以将图片和其他的表单元素一起提交到服务器,服务器接受到的图片其实已经存储于容器的临时文件中,进行文件拷贝工作比较简单. 缺点是无法及时看到图片上传的预览效果,图片一旦选择错误只能重新提交. 注:红色代码为

百度UEditor图片上传、SpringMVC、Freemarker、Tomcat、Nginx、静态资源

个人官网.公司项目都需要 可视化编辑器,百度UEditor做得很不错,就用的这个.项目后台用到了SpringMVC.Freemarker,开发过程中部署在Jetty,线上部署用Tomcat,最后可能配置Nginx代理.     在实际使用过程中,遇到了太多的问题,因此有必要梳理和总结下. 1. 先说百度UEditor在Java环境中的使用:1.1   Html页面或者Freemarker模版里,引入百度UEditor的相关JS和CSS,如下 <script type="text/javas