服务器之家

服务器之家 > 正文

springMVC实现前台带进度条文件上传的示例代码

时间：2020-07-26 14:18     来源/作者：零度anngle

项目框架采用spring+hibernate+springMVC如果上传文件不想使用flash那么你可以采用HTML5;截图前段模块是bootstarp框架;不废话直接来代码;spring-mvc配置文件;效果截图如下:

springMVC实现前台带进度条文件上传的示例代码

详细实现如下:

1、mvc-config.xml

?
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
63
64
65
66
67
68
69
70
71
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"     
    xmlns:context="http://www.springframework.org/schema/context"
  xmlns:mvc="http://www.springframework.org/schema/mvc"
  xsi:schemaLocation="http://www.springframework.org/schema/beans 
  http://www.springframework.org/schema/beans/spring-beans.xsd
  http://www.springframework.org/schema/context
  http://www.springframework.org/schema/context/spring-context-3.2.xsd
  http://www.springframework.org/schema/mvc
  http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd">
 
  <!-- 注解扫描包 -->
  <context:component-scan base-package="com.yunfang.banks.controllers" />
 
  <!-- 开启注解 -->
  <mvc:annotation-driven />
  <!-- 不拦截静态资源 -->
  <mvc:default-servlet-handler />
  <mvc:interceptors>
    <mvc:interceptor>
      <mvc:mapping path="/js/" />
      <mvc:mapping path="/js/**" />
      <bean class="com.yunfang.banks.intreceptor.MyInterceptor"></bean>
    </mvc:interceptor>
  </mvc:interceptors>
  <mvc:interceptors>
    <bean class="com.yunfang.banks.intreceptor.MyInterceptor"></bean>
  </mvc:interceptors>
  <!-- 静态资源(js/image)的访问 -->
  <mvc:resources location="/js/" mapping="/js/**" />
 
  <!-- 定义视图解析器 -->
  <bean id="viewResolver"
    class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <property name="prefix" value="/"></property>
    <property name="suffix" value=""></property>
  </bean>
 
  <bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
    <property name="messageConverters">
      <list>
        <!--下载的时候专用 -->
        <bean
          class="org.springframework.http.converter.ByteArrayHttpMessageConverter" />
        <bean id="jsonHttpMessageConverter"
          class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter">
          <property name="supportedMediaTypes">
            <list>
              <value>text/plain;charset=UTF-8</value>
            </list>
          </property>
        </bean>
      </list>
    </property>
  </bean>
  <!-- 配置springMVC处理上传文件的信息,自定义上传,带进度条 -->
  <bean id="multipartResolver" class="com.yunfang.banks.listener.CustomMultipartResolver">
      <property name="defaultEncoding" value="utf-8" />
    <property name="maxUploadSize" value="10000000000" />
  </bean>
    <!--   
    <bean id="multipartResolver"
    class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="defaultEncoding" value="utf-8" />
    <property name="maxUploadSize" value="10485760000" />
    <property name="maxInMemorySize" value="40960" />
  </bean> 
    -->
   
</beans>

2、实体工具类：Progress.Java

?
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
package com.yunfang.banks.listener;
 
public class Progress {
   
  private long pBytesRead;
  private long pContentLength;
  private long pItems;
  public long getpBytesRead() {
    return pBytesRead;
  }
  public void setpBytesRead(long pBytesRead) {
    this.pBytesRead = pBytesRead;
  }
  public long getpContentLength() {
    return pContentLength;
  }
  public void setpContentLength(long pContentLength) {
    this.pContentLength = pContentLength;
  }
  public long getpItems() {
    return pItems;
  }
  public void setpItems(long pItems) {
    this.pItems = pItems;
  }
  @Override
  public String toString() {
    return "Progress [pBytesRead=" + pBytesRead + ", pContentLength="
        + pContentLength + ", pItems=" + pItems + "]";
  }
   
   
   
}

3、文件上传进度监听类：FileUploadProgressListener.java

?
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
package com.yunfang.banks.listener;
 
import javax.servlet.http.HttpSession;
import org.apache.commons.fileupload.ProgressListener;
import org.springframework.stereotype.Component;
 
@Component
public class FileUploadProgressListener implements ProgressListener {
  private HttpSession session;
  public void setSession(HttpSession session){
    this.session=session;
    Progress status = new Progress();//保存上传状态
    session.setAttribute("status", status);
  }
  public void update(long pBytesRead, long pContentLength, int pItems) {
    Progress status = (Progress) session.getAttribute("status");
    try {
      Thread.sleep(5);
    } catch (InterruptedException e) {
      e.printStackTrace();
    }
    status.setpBytesRead(pBytesRead);
    status.setpContentLength(pContentLength);
    status.setpItems(pItems);
    //System.out.println(">>>>>>>>>>>>>>>>>>>>"+status);
     
  }
 
}

4、自定义扩展org.springframework.web.multipart.commons.CommonsMultipartResolver类，重写public MultipartParsingResult parseRequest(HttpServletRequest request) throws MultipartException方法：

CustomMultipartResolver.java

?
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
package com.yunfang.banks.listener;
 
import java.util.List;
 
import javax.servlet.http.HttpServletRequest;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUpload;
import org.apache.commons.fileupload.FileUploadBase;
import org.apache.commons.fileupload.FileUploadException;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.multipart.MaxUploadSizeExceededException;
import org.springframework.web.multipart.MultipartException;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;
 
public class CustomMultipartResolver extends CommonsMultipartResolver {
  @Autowired
  private FileUploadProgressListener progressListener;
 
  public void setFileUploadProgressListener(
      FileUploadProgressListener progressListener) {
    this.progressListener = progressListener;
  }
   
  @Override
  @SuppressWarnings("unchecked")
  public MultipartParsingResult parseRequest(HttpServletRequest request)
      throws MultipartException {
    String encoding = determineEncoding(request);
    FileUpload fileUpload = prepareFileUpload(encoding);
    progressListener.setSession(request.getSession());
    fileUpload.setProgressListener(progressListener);
    try {
      List<FileItem> fileItems = ((ServletFileUpload) fileUpload).parseRequest(request);
      return parseFileItems(fileItems, encoding);
    }
    catch (FileUploadBase.SizeLimitExceededException ex) {
      throw new MaxUploadSizeExceededException(fileUpload.getSizeMax(), ex);
    }
    catch (FileUploadException ex) {
      throw new MultipartException("Could not parse multipart servlet request", ex);
    }
  }
   
}

5、uploadController.java

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@RequestMapping("UserControllers/progress")
public void uploadFile(HttpServletRequest request,HttpServletResponse response,
            @RequestParam("file") CommonsMultipartFile file) throws IOException {
   response.setContentType("text/html");
   response.setCharacterEncoding("GBK");
   PrintWriter out;
   boolean flag = false;
   if (file.getSize() > 0) {
     //文件上传的位置可以自定义
     flag = FileUploadUtil.upLoadFile(file, request);
   }
   out = response.getWriter();
   if (flag == true) {
    out.print("1");
   } else {
    out.print("2");
   }
}

6、FileUploadUtil.java

?
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
import java.io.File;
 
import javax.servlet.http.HttpServletRequest;
 
import org.springframework.web.multipart.MultipartFile;
 
public class FileUploadUtil {
   
  public static Boolean uploadFile(HttpServletRequest request, MultipartFile file) {
     System.out.println("开始");
     String path = request.getSession().getServletContext().getRealPath("upload");
     String fileName = file.getOriginalFilename();
     System.out.println(path);
     File targetFile = new File(path, fileName);
     if (!targetFile.exists()) {
       targetFile.mkdirs();
     }
     // 保存
     try {
       file.transferTo(targetFile);
       return true;
     } catch (Exception e) {
       e.printStackTrace();
       return false;
     }
 
  }
 
}

7、前台页面

?
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<%@ page language="java" import="java.util.*" pageEncoding="Utf-8"%>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme() + "://"
      + request.getServerName() + ":" + request.getServerPort()
      + path + "/";
%>
 
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
 
 
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
 <link rel="stylesheet" type="text/css" href="styles.css">
-->
<link href="css/bootstrap.min.css" rel="stylesheet">
 
<style type="text/css">
.file-box {
  position: relative;
  width: 340px
}
 
.txt {
  height: 22px;
  border: 1px solid #cdcdcd;
  width: 180px;
  vertical-align: middle;
  margin: 0;
  padding: 0
}
 
.btn {
  border: 1px solid #CDCDCD;
  height: 24px;
  width: 70px;
  vertical-align: middle;
  margin: 0;
  padding: 0
}
 
.file {
  position: absolute;
  top: 0;
  right: 80px;
  height: 24px;
  filter: alpha(opacity :  0);
  opacity: 0;
  width: 260px;
  vertical-align: middle;
  margin: 0;
  padding: 0
}
</style>
<%--<script type="text/javascript">
    function myInterval()
    {
      $("#progress").html("");
      $.ajax({
        type: "POST",
        url: "<%=basePath%>UserControllers/getSessions",
      data : "1=1",
      dataType : "text",
      success : function(msg) {
        var data = msg;
        console.log(data);
        $("#pdiv").css("width", data + "%");
        $("#progress").html(data + "%");
      }
    });
  }
  function autTime() {
    setInterval("myInterval()", 200);//1000为1秒钟
  }
</script>
 
 
--%>
<script type="text/javascript">
  function UpladFile() {
    var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
    var FileController = "UserControllers/progress"; // 接收上传文件的后台地址 
    // FormData 对象---进行无刷新上传
    var form = new FormData();
    form.append("author", "hooyes"); // 可以增加表单数据
    form.append("file", fileObj); // 文件对象
    // XMLHttpRequest 对象
    var xhr = new XMLHttpRequest();
    xhr.open("post", FileController, true);
    xhr.onload = function() {
      alert("上传完成!");
      //$('#myModal').modal('hide');
    };
        //监听progress事件
    xhr.upload.addEventListener("progress", progressFunction, false);
    xhr.send(form);
  }
  function progressFunction(evt) {
 
    var progressBar = document.getElementById("progressBar");
 
    var percentageDiv = document.getElementById("percentage");
 
    if (evt.lengthComputable) {
 
      progressBar.max = evt.total;
 
      progressBar.value = evt.loaded;
 
      percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100)
          + "%";
 
    }
 
  }
</script>
 
</head>
 
<body style="width: 80%;height: 80%;margin: 0px auto;">
  <div class="row bootstrap-admin-no-edges-padding">
    <div class="col-md-12">
      <div class="panel panel-default">
        <div class="panel-heading">
          <div class="text-muted bootstrap-admin-box-title">文件管理</div>
        </div>
        <div class="bootstrap-admin-panel-content">
          <button class="btn btn-primary btn-lg" data-toggle="modal"
            data-target="#myModal">上传</button>
          <input type="text" id="test">
        </div>
      </div>
    </div>
  </div>
 
  <!-- 模态框（Modal） -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
    aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"
            aria-hidden="true">×</button>
          <h4 class="modal-title" id="myModalLabel">文件上传进度</h4>
        </div>
        <div class="modal-body">
          <progress id="progressBar" value="0" max="100"
            style="width: 100%;height: 20px; "> </progress>
          <span id="percentage" style="color:blue;"></span> <br>
          <br>
          <div class="file-box">
            <input type='text' name='textfield' id='textfield' class='txt' />
            <input type='button' class='btn' value='浏览...' /> <input
              type="file" name="file" class="file" id="file" size="28"
              onchange="document.getElementById('textfield').value=this.value" />
            <input type="submit" name="submit" class="btn" value="上传"
              onclick="UpladFile()" />
             
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭
          </button>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal -->
  </div>
  <script type="text/javascript"
    src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。

标签：
进度条 文件上传 SpringMVC 

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
歪歪漫画vip账号共享2020_yy漫画免费账号密码共享
歪歪漫画vip账号共享2020_yy漫画免费账号密码共享 2020-04-07
男生常说24816是什么意思？女生说13579是什么意思？
男生常说24816是什么意思？女生说13579是什么意思？ 2019-09-17
沙雕群名称大全2019精选 今年最火的微信群名沙雕有创意
沙雕群名称大全2019精选 今年最火的微信群名沙雕有创意 2019-07-07
玄元剑仙肉身有什么用 玄元剑仙肉身境界等级划分
玄元剑仙肉身有什么用 玄元剑仙肉身境界等级划分 2019-06-21
返回顶部