服务器之家：专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - Java教程 - springMVC实现前台带进度条文件上传的示例代码

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

2020-07-26 14:18零度anngle Java教程

本篇文章主要介绍了springMVC实现前台带进度条文件上传的示例代码，具有一定的参考价值，有兴趣的可以了解一下。

项目框架采用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
  • 文件上传

    • 延伸 · 阅读

    精彩推荐
    最近更新
    编辑推荐
    阅读排行
    热门标签
    501 　 406 　 415 　 1433 　 2000 　 401 　 330 　 GOF23 　 new 　 newInstance 　 Hibernate 　 volatile 　 集合 　 spring 　 consul 　 critical 　 嵌套循环 　 注册服务 　 堆栈类 　 supplyAsync 　 遍历 　 设计模式 　 观察者模式 　 小数 　 JAVA8 　 写入文件 　 回车 　 制表符 　 排列组合 　 Java 　
    © 2019-2023 服务器之家(www.zzvips.com) 版权所有关于我们联系我们版权申明网站地图