码迷,mamicode.com
首页 > Web开发 > 详细

EasyUI 单个/多个文件上传 SSM+EasyUI

时间:2015-10-13 01:28:58      阅读:3503      评论:0      收藏:0      [点我收藏+]

标签:

 

关于文件上传和下载网上有很多相关教程,但针对入门的新人来说大部分都不够详细,而且由于一直换工作的原因(主要是因为自己的懒惰)把这篇整理拖延了很久,终于在今天打算将它完成了……(此处应有鸡蛋)

 

首先说要要完成的事情:

基于EasyUi+SSM框架完成文件上传,主要实用了easyui-filebox上传按钮;

准备工具:
环境:
  Eclipse 4.3
  jdk1.7.0_72
  apache-maven-3.0.4
  apache-tomcat-7.0.53
  spring-mvc-4.0
  spring-beans-4.0
  mybatis-3.2.8
  oracle 11.2.0.3.0

jar包:
  commons-io-2.4
  commons-fileupload-1.3

基本步骤:

  按照数据流向来阐述:

    >>> 页面提供文件上传控件;
    >>> contorller端接收页面传入的文件流,在这个步骤可以写入数据库或者放到指定目录;
    >>> 将上传的返回结果写回页面;

代码部分:

#jsp.js.jquery
 1 function uplodad(
 2     $(‘#fromNameId‘).form({    
 3                 url:‘controllerurl‘,    
 4                 onSubmit: function(){
 5                     //uploda before something
 6                 },    
 7                 success:function(data){    
 8                     //upload after something
 9                 },error:function(date){
10                     $.messager.alert(data.errormsg);
11                 }  
12             });    
13             $(‘#fromNameId‘).submit();
14 );

#jsp.html

1 <form id="rundApplyFrom" method="post" enctype="multipart/form-data"> 
2     <tr id="trIdCard"> 
3         <td>msg:</td> 
4         <td><input class="easyui-filebox" id="uploadId" name="sourceFile" style="width:200px"></td>
5     </tr>
6 </from>
7 
8 <!-- 这里的name属性需要和controller方法中用于接收上传文件Bean中的byte[]字段名字相同 -->

这里使用了EasyUi自带的filbox控件,在网上找了很多文件上传的资料都说要实用第三方插件什么的,但对于还是新人的我来说看着都一个头俩个个大;

于是看了一下相关资料和文档发现了这个东西;

使用步骤很简单:

  1.在html/jsp页面做如上配置,一个用于上传文件的选择框;

  2.通过ajax方式,使用jquery的标签选择器将form区域的id作为提交标记发起ajax访问controller中的upload方法(js部分代码);

在controller中的upload方法形参可以接收一个pojo,内部需要有一个MultipartFile属性命名和form域中对应的name相同,这个例子中我使用的是sourceFile(见上);

通过文章最开始提到的jar包自带的功能和SpringMVC的配置,可以将这里页面用户选择的文件自动存入pojo中对应的字段中(即sourceFile);

 

# springMVC.xml 配置

  <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  
        <property name="defaultEncoding" value="UTF-8"/>  
  </bean> 

 

# pojo.java

public class AReFundApplyProcess implements Serializable {

       private String prosn  ; 
       private String applyid; 
       private byte[] annex  ; 
       private Object content;
       private MultipartFile[] sourceFile;

// sourceFile geter, seter

在这个pojo中我用于接收文件的MultipartFile字段用的是一个数组,因为在案例中是多文件上传;

在页面上file-box中的文件会通过springMVC存入这个pojo的MultipartFile字段中,对于多文件来讲通过获取角标即可获取到对应的文件;

 

#serviceImpl.java

  /**
     * uplodaApplyFile
     * 方法描述:文件上传方法;
     * @param request
     */
    public void uplodaApplyFile(
            AReFundApplyProcess arProcess, 
            AReFundApply aRefundApply){
        
        MultipartFile[] uploadfile=arProcess.getSourceFile();//这里用于获取前台传入Bean中Byte字段中的流;
        InputStream fileIs= null;                            //因为案例中是多文件上传,所以是数组;
        aRefundApply.setOrderno(arProcess.getProsn());
        
        try {
            if(uploadfile != null&& uploadfile.length>0){
                for (int i = 0; i < uploadfile.length; i++) {
                    MultipartFile file=uploadfile[i];
                    fileIs= file.getInputStream();
                    byte[] b = FileCopyUtils.copyToByteArray(fileIs);
                    if(b.length>0){
                        arProcess.setAnnex(b);
                        aReFundApplyCheckService.insertAReFundApplyProcess(arProcess);
                    }
                }
            }
        } catch (IOException e) {
            log.error("上传文件异常...",e);
        }
    }

这里可以看到,MultipartFile类可以有方法获取到一个Inputstrem,这样再将其转换为byte数组即可存入数据库中的BLOB字段了;

顺带一提关于BLOB字段存入Oracle数据库中的问题,经过验证,Mybatis支持直接将byte数组作为BLOB字段存入数据库;只需要在Mapper中指定jdbcType=BLOB即可;

 

参考资料:

http://blog.csdn.net/songanling/article/details/38951013

EasyUI 单个/多个文件上传 SSM+EasyUI

标签:

原文地址:http://www.cnblogs.com/caleb-box/p/4873356.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!