spring mvc+xheditor图片上传

2023-10-28 03:59

本文主要是介绍spring mvc+xheditor图片上传,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!



用户发表文章(Post),在xheditor中写文字和上传图片,交叉进行,图片文件上传到了服务器,图片的名称,url,大小等信息在上传的同时需要单独保存在一张表里。

因此在上一篇的UploadController中除了做上传图片这事之外,还要向Attachment记录图片信息。修改代码如下:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
@Controller
@RequestMapping ( "/upload" )
public class UploadController {
     private static final Log logger = LogFactory.getLog(UploadController. class );
     @Autowired
     private AttachmentService attachmentService;
     @RequestMapping (value = "/image" , method = RequestMethod.POST)
     @ResponseBody
     public String image(HttpServletRequest request,
             HttpSession session,
             @RequestParam ( "filedata" ) MultipartFile file) throws Exception {
         // 将图片按日期分开存放,方便管理
         final String prefix = "upload/images/"
                 + DateUtil.getFormatedDate( "yyyy/MM_dd" );
         // 存放到web根目录下,如果日期目录不存在,则创建,
         // 注意 request.getRealPath("/") 已经标记为不推荐使用了.
         final String realPath = session.getServletContext().getRealPath(prefix);
         logger.info(realPath);
         File dir = new File(realPath);
         if (!dir.exists()) {
             dir.mkdirs();
         }
         // 以下是真正的上传部分
         String error = "" ;
         // 取得原文件名
         String originName = file.getOriginalFilename();
         // 取得文件后缀
         String fileExt = originName.substring(originName.lastIndexOf( "." ) + 1 );
         // 按时间戳生成图片文件名
         String picture = DateUtil.getFormatedDate( "yyyyMMddHHmmss" ) + "."
                 + fileExt;
         Attachment attachment = new Attachment();
         try {
             IOUtils.copy(file.getInputStream(), new FileOutputStream( new File(dir, picture)));
             //向attachment表中插入一条post_id为空的图片记录
             attachment.setDownloadCount( 0 );
             attachment.setSize(( int ) file.getSize());
             attachment.setUrl(prefix + "/" + picture);
             attachment = attachmentService.createAttachment(attachment);
         } catch (Exception e) {
             logger.error( "error:" , e);
             error = e.getMessage();
         }
         String http = "http://" + request.getServerName()
                     + ":" 
                     + request.getServerPort()     
                     + request.getContextPath();  
         String url =  http + "/" + prefix + "/" + picture;
         //注意这里的格式(见xheditor文档)
         //{'err':'',msg:{'url':'XXX/upload/images/2012/11_11/20121111015039.jpg','localname':'我的头像.jpg','id':'63'}}
         String json = String.format( "{'err':'%s',msg:{'url':'%s','localname':'%s','id':'%s'}}" ,
                                              error, url, originName, attachment.getId());
         return json;
     }
}

稍微解释一下xheditor json字符串中几个参数的作用::

(1)err:当这个值不为空时,xheditor会在JSP中弹出一个上传失败的对话框并显示err的内容
(2)url: 最终拼凑的可在浏览器中访问的http图片地址,xheditor直接根据这个值在editor中显示图片
(3)localname:这个值不是必须的,一般用来存储图片的名字,是url中的最后部分(也可以不是,比如我url中的图片名字是用时间戳命名的,而这里localname是图片本身的名字)
(4)id:这个值不是必须的,它代表图片在attachment表中的id,回传到JSP,当发表文章做进一步的处理

这张表Attachment和Post是多对一关系,Attachment表中有一个post_id,问题是:保存图片信息的时候, post_id还不存在(用户还没有提交Post呢),

怎么办呢?

我们可以在每次上传时插入一条没有post_id的图片记录,等到用户真正发表文章的时候,批量更新这些attachment的post_id,相关代码如下:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
@Override
public void updateAttachmentsWithPostId(List<Attachment> attchments, Long postId) {
     List<Object[]> batchArgs = new ArrayList<Object[]>();
     if (attchments != null ) {
         for (Attachment attachment : attchments) {
             Object[] args = new Object[] { postId, attachment.getId() };
             batchArgs.add(args);
         }
     }
     String sql = "update cms_attachment set post_id = ? where id=?" ;
     jdbcTemplate.batchUpdate(sql, batchArgs);
}

其间解决了一个@ResponseBody乱码问题(json字符串中的localname为中文时回传到JSP中是乱码)
在这里找到了解决办法:http://www.oschina.net/code/snippet_103691_11482,加入了如下配置:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!-- 解决@ResponseBody乱码问题, 需要在annotation-driven之前并且spring版本需要3.1.2以上 -->
<!--Spring3.1推荐使用RequestMappingHandlerAdapter -->
< bean
     class = "org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter" >
     < property name = "messageConverters" >
         < list >
             < bean
                 class = "org.springframework.http.converter.ByteArrayHttpMessageConverter" />
             < bean
                 class = "org.springframework.http.converter.StringHttpMessageConverter" >
                 < property name = "supportedMediaTypes" >
                     < list >
                         < value >text/plain;charset=UTF-8</ value >
                     </ list >
                 </ property >
             </ bean >
             < bean
                 class = "org.springframework.http.converter.ResourceHttpMessageConverter" />
             < bean
                 class = "org.springframework.http.converter.xml.SourceHttpMessageConverter" />
             < bean
                 class = "org.springframework.http.converter.xml.XmlAwareFormHttpMessageConverter" />
             < bean
                 class = "org.springframework.http.converter.xml.Jaxb2RootElementHttpMessageConverter" />
         </ list >
     </ property >
</ bean >

我们可以从spring日志中看出加这个配置的作用

加之前

[DEBUG] Written [{'err':'',msg:

{'url':'http://localhost:9080/spring/upload/images/2012/11_11/20121111011413.jpg','localname':'我的头

像.jpg','id':'50'}}] as "text/html" using 

[org.springframework.http.converter.StringHttpMessageConverter@93d9c7] 

加之后:
[DEBUG] Written [{'err':'',msg:{'url':'http://localhost:9080/spring/upload/images/2012/11_11/20121111015039.jpg','localname':'我的头像.jpg','id':'63'}}] as "text/plain;charset=UTF-8" using [org.springframework.http.converter.StringHttpMessageConverter@1fdec30]

前台部分,相关的JS如下:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<script type= "text/javascript" >
     //图片预览
     function previewImage(x){
         $( '#preview' ).attr( "src" , "${ctx}/" + $(x).find( "option:selected" ).val());
     }
     
     $(document).ready( function () {
         //初始化xhEditor编辑器插件 
         $( '#content' ).xheditor({
             tools : 'full' ,
             skin : 'default' ,
             upImgUrl : "${ctx}/upload/image" ,
             upImgExt : "jpg,jpeg,png,gif" ,
             html5Upload : false ,
             onUpload : insertUpload
         });
         
         //图片上传回调函数 
         function insertUpload(arrMsg) {
             //xheditor返回的arrMsg是一个Object数组
             var msg = arrMsg[0];
             
             //(1)其中url插入到编辑器,这样xheditor才能正常显示图片
             var url = msg.url;
             $( "#content" ).append(url);
             //以下步骤不是必须的
             //(2)将attachment_id保存到checkbox中,发表文章时根据这些attachment_id去更新图片的post_id
             var id = msg.id;
             $( "#imagesDiv" ).append( "<input type='checkbox' name='attachments' checked='checked' onclick='return false;' value='" +id+ "''/><br>" );
             
             //(3)图片的名字放到下拉列表,用户从下拉列表 中选择图片做为Post的主题图片
             var localname = msg.localname;
             var urlWithoutHttp = url.substring(url.indexOf( "/upload" )+1);
             $( "#topicImageUrl" ).append( "<option value='" +urlWithoutHttp+ "'>" + localname + "</option>" );
         }
         
         
         //聚焦第一个输入框
         $( "#name" ).focus();
         //为inputForm注册validate函数
         $( "#inputForm" ).validate();
         
     });
</script>

相关的form表单元素如下:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
< div class = "control-group" >
     < label class = "control-label" for = "content" >内容:</ label >
     < div class = "controls" >
         < sf:textarea path = "content" rows = "15" cssClass = "span10" />
     </ div >
     < div class = "controls" id = "imagesDiv" style = "display:none" >
     </ div >
</ div >
< div class = "control-group" >
     < label class = "control-label" for = "topicImageUrl" >主题图片:</ label >
     < div class = "controls" >
         < sf:select path = "topicImageUrl" onchange = 'previewImage(this)' >
             < sf:option value = "" >Please select</ sf:option >
         </ sf:select >
     </ div >
</ div >
< div class = "control-group" >
     < label class = "control-label" for = "hit" >图片预览:</ label >
     < div class = "controls" >
         < img id = "preview" src = "" border = "0" width = "200" height = "200" />
     </ div >
</ div >

最终的效果如下:


这篇关于spring mvc+xheditor图片上传的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/290547

相关文章

Spring事务传播机制最佳实践

《Spring事务传播机制最佳实践》Spring的事务传播机制为我们提供了优雅的解决方案,本文将带您深入理解这一机制,掌握不同场景下的最佳实践,感兴趣的朋友一起看看吧... 目录1. 什么是事务传播行为2. Spring支持的七种事务传播行为2.1 REQUIRED(默认)2.2 SUPPORTS2

怎样通过分析GC日志来定位Java进程的内存问题

《怎样通过分析GC日志来定位Java进程的内存问题》:本文主要介绍怎样通过分析GC日志来定位Java进程的内存问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、GC 日志基础配置1. 启用详细 GC 日志2. 不同收集器的日志格式二、关键指标与分析维度1.

Java进程异常故障定位及排查过程

《Java进程异常故障定位及排查过程》:本文主要介绍Java进程异常故障定位及排查过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、故障发现与初步判断1. 监控系统告警2. 日志初步分析二、核心排查工具与步骤1. 进程状态检查2. CPU 飙升问题3. 内存

java中新生代和老生代的关系说明

《java中新生代和老生代的关系说明》:本文主要介绍java中新生代和老生代的关系说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、内存区域划分新生代老年代二、对象生命周期与晋升流程三、新生代与老年代的协作机制1. 跨代引用处理2. 动态年龄判定3. 空间分

Java设计模式---迭代器模式(Iterator)解读

《Java设计模式---迭代器模式(Iterator)解读》:本文主要介绍Java设计模式---迭代器模式(Iterator),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录1、迭代器(Iterator)1.1、结构1.2、常用方法1.3、本质1、解耦集合与遍历逻辑2、统一

Java内存分配与JVM参数详解(推荐)

《Java内存分配与JVM参数详解(推荐)》本文详解JVM内存结构与参数调整,涵盖堆分代、元空间、GC选择及优化策略,帮助开发者提升性能、避免内存泄漏,本文给大家介绍Java内存分配与JVM参数详解,... 目录引言JVM内存结构JVM参数概述堆内存分配年轻代与老年代调整堆内存大小调整年轻代与老年代比例元空

深度解析Java DTO(最新推荐)

《深度解析JavaDTO(最新推荐)》DTO(DataTransferObject)是一种用于在不同层(如Controller层、Service层)之间传输数据的对象设计模式,其核心目的是封装数据,... 目录一、什么是DTO?DTO的核心特点:二、为什么需要DTO?(对比Entity)三、实际应用场景解析

Java 线程安全与 volatile与单例模式问题及解决方案

《Java线程安全与volatile与单例模式问题及解决方案》文章主要讲解线程安全问题的五个成因(调度随机、变量修改、非原子操作、内存可见性、指令重排序)及解决方案,强调使用volatile关键字... 目录什么是线程安全线程安全问题的产生与解决方案线程的调度是随机的多个线程对同一个变量进行修改线程的修改操

从原理到实战深入理解Java 断言assert

《从原理到实战深入理解Java断言assert》本文深入解析Java断言机制,涵盖语法、工作原理、启用方式及与异常的区别,推荐用于开发阶段的条件检查与状态验证,并强调生产环境应使用参数验证工具类替代... 目录深入理解 Java 断言(assert):从原理到实战引言:为什么需要断言?一、断言基础1.1 语

深度解析Java项目中包和包之间的联系

《深度解析Java项目中包和包之间的联系》文章浏览阅读850次,点赞13次,收藏8次。本文详细介绍了Java分层架构中的几个关键包:DTO、Controller、Service和Mapper。_jav... 目录前言一、各大包1.DTO1.1、DTO的核心用途1.2. DTO与实体类(Entity)的区别1