spring mvc+xheditor图片上传

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

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

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

 ? 
 @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，相关代码如下：

 ? 
 @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，加入了如下配置：

 ? 
 <!-- 解决@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如下：

 ? 
 <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> 