Erlo

maven工程 java 实现文件上传 SSM ajax异步请求上传

时间:2018-03-14   阅读:1473次   来源:博客园
页面报错
点赞

java ssm框架实现文件上传 

实现:单文件上传、多文件上传(单选和多选),并且用 ajax 异步刷新,在当前界面显示上传的文件

首先springmvc的配置文件要配置上传文件解析器:

 1 <!-- 配置文件解析器 -->
 2         <bean id="multipartResolver"
 3             class="org.springframework.web.multipart.commons.CommonsMultipartResolver"
 4             p:defaultEncoding="utf-8">
 5             <property name="uploadTempDir" value="/temp"></property>
 6             <property name="maxUploadSize">
 7                 <value>209715200</value><!-- 200MB -->
 8             </property>
 9             <property name="maxInMemorySize">
10                 <value>4096</value><!-- 4KB大小读写 -->
11             </property>
12         </bean>

 

其次在pom.xml中要配置两个上传文件的依赖

 1 <!--上传文件相关的jar包  -->
 2          <dependency>
 3             <groupId>commons-io</groupId>
 4             <artifactId>commons-io</artifactId>
 5             <version>2.4</version>
 6           </dependency>
 7           
 8           <dependency>
 9             <groupId>commons-fileupload</groupId>
10             <artifactId>commons-fileupload</artifactId>
11             <version>1.3.1</version>
12           </dependency>
13           
14           <dependency>
15             <groupId>org.apache.commons</groupId>
16             <artifactId>commons-lang3</artifactId>
17             <version>3.3.2</version>
18           </dependency>

 

单文件上传:

 1 #zs#*
 2      * 单文件上传
 3      * @param file
 4      * @param request
 5      * @return
 6      * @throws IllegalStateException
 7      * @throws IOException
 8      * @throws JSONException
 9      #fzs#
10     public static String simUpload(MultipartFile file, HttpServletRequest request) 
11             throws IllegalStateException, IOException, JSONException{
12         
13         if(!file.isEmpty()){
14             String path = request.getSession().getServletContext().getRealPath("/upload");
15             //定义文件
16             File parent = new File(path);
17             if(!parent.exists()) parent.mkdirs();
18             
19             HashMap<String, Object> map = new HashMap<String,Object>();
20             
21             String oldName = file.getOriginalFilename();
22             
23             long size = file.getSize();
24             
25             //使用TmFileUtil文件上传工具获取文件的各种信息
26             //优化文件大小
27             String sizeString = TmFileUtil.countFileSize(size);
28             //获取文件后缀名
29             String ext = TmFileUtil.getExtNoPoint(oldName);
30             //随机重命名,10位时间字符串
31             String newFileName = TmFileUtil.generateFileName(oldName, 10, "yyyyMMddHHmmss");
32             
33             String url = "upload/"+newFileName;
34             
35             //文件传输,parent文件
36             file.transferTo(new File(parent, newFileName));
37             
38             map.put("oldname",oldName);//文件原名称
39             map.put("ext",ext);
40             map.put("size",sizeString);
41             map.put("name",newFileName);//文件新名称
42             map.put("url",url);
43             
44             //以json方式输出到页面
45             return JSONUtil.serialize(map);
46         }else{
47             return null;
48         }
49     }

 

多文件上传(整合了 单选文件和多选文件 的两种)

 1 #zs#*
 2      * 多文件上传
 3      * @param files
 4      * @param request
 5      * @return
 6      * @throws IllegalStateException
 7      * @throws IOException
 8      * @throws JSONException
 9      #fzs#
10     public static List<HashMap<String, Object>> mutlUpload(MultipartFile[] files, HttpServletRequest request) 
11             throws IllegalStateException, IOException, JSONException{
12         
13         if(files.length > 0){
14             String path = request.getSession().getServletContext().getRealPath("/upload");
15             //定义文件
16             File parent = new File(path);
17             if(!parent.exists()) parent.mkdirs();
18             
19             //创建这个集合保存所有文件的信息
20             List<HashMap<String, Object>> listMap = new ArrayList<HashMap<String, Object>>();
21             
22             //循环多次上传多个文件
23             for (MultipartFile file : files) {
24                 
25                 //创建map对象保存每一个文件的信息
26                 HashMap<String, Object> map = new HashMap<String,Object>();
27                 
28                 String oldName = file.getOriginalFilename();
29 
30                 long size = file.getSize();
31                 
32                 //使用TmFileUtil文件上传工具获取文件的各种信息
33                 //优化文件大小
34                 String sizeString = TmFileUtil.countFileSize(size);
35                 //获取文件后缀名
36                 String ext = TmFileUtil.getExtNoPoint(oldName);
37                 //随机重命名,10位时间字符串
38                 String newFileName = TmFileUtil.generateFileName(oldName, 10, "yyyyMMddHHmmss");
39                 
40                 String url = "upload/"+newFileName;
41                 
42                 //文件传输,parent文件
43                 file.transferTo(new File(parent, newFileName));
44                 
45                 map.put("oldname",oldName);//文件原名称
46                 map.put("ext",ext);
47                 map.put("size",sizeString);
48                 map.put("name",newFileName);//文件新名称
49                 map.put("url",url);
50                 
51                 listMap.add(map);
52             }
53             
54             //以json方式输出到页面
55             return listMap;
56         }else{
57             return null;
58         }
59     }

 

前端代码:

文件多选,实际上在

<input type="file" class="fileupon33" name="fileupmulti" accept="image/jpeg,image/png" onchange="mutiFiles(this)" multiple/>

多加了一个 multiple 属性。

要想在当前界面显示上传的文件,而不跳转,就利用 ajax 异步请求:

不过需要注意的是,我这里使用 FormData() 储存文件对象, ajax 要配上这几个参数才可实现文件上传:

$.ajax({
  type:"post",
  data:form,  //FormData()对象
  url:basePath+"/upload/mutl",
  contentType: false, //必须false才会自动加上正确的Content-Type
  processData: false, //必须false才会避开jQuery对 formdata 的默认处理     , XMLHttpRequest会对 formdata 进行正确的处理
  success:function(data){

  }

});

  1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2 <%
  3     String path = request.getContextPath();
  4     String basePath = request.getScheme()+"://"+request.getServerName()+path+"/";
  5     pageContext.setAttribute("basePath", basePath);
  6 %>
  7 <!DOCTYPE HTML>
  8 <html>
  9   <head>
 10       <title>文件上传</title>
 11     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 12     <meta name="keywords" content="keyword1,keyword2,keyword3">
 13     <meta name="description" content="This is my page">
 14     <style>
 15         *{padding: 0;margin:0}
 16         ul,li{list-style:none;}
 17         a{color:#333;text-decoration: none;}
 18         .hidden{display:hidden;}
 19         input{border:0;outline:0;margin-bottom:10px;}
 20         img{vertical-align: middle;}
 21         .clear{clear:both;}
 22         body{font-size:14px;font-family: "微软雅黑";background:#333}
 23         .buttons{    display: block;
 24                     width: 80px;
 25                     height: 26px;
 26                     color: black;
 27                     background: #ffffff;
 28                     font-size: 14px;
 29                     font-family: "微软雅黑";
 30                     margin: 0 auto;
 31                     cursor: pointer;
 32                     margin-bottom: 10px;}
 33         
 34         .container{width:1080px;margin:80px auto;}
 35         
 36         .formbox{float:left;text-align:center;width:300px;}
 37         .title{color:#fff;font-size:24px;margin-bottom:20px;}
 38         .formbox .f_btn{width:100px;height:40px;background:#0c0;color:#fff;font-size:14px;font-family:"微软雅黑";cursor:pointer;font-weight:bold;}
 39         .massage p{color:#fff;text-align:left;height:24px;}
 40         .sinimg{width:300px;height:300px;line-height:300px;color:#fff;}
 41 
 42         .formmutibox{float:left;width: 342px;margin: 0 24px 0;text-align:center;
            

相关推荐

评论留言

还没有评论留言,赶紧来抢楼吧~~

每日一笑关闭

返回顶部

给这篇文章打个标签吧~

棒极了 糟糕透顶 好文章 PHP JAVA JS 小程序 Python SEO MySql 确认