springMVC实现前台带进度条文件上传的示例代码
作者：零度anngle 发布时间：2021-09-15 17:24:44
标签：springmvc,上传进度条
项目框架采用spring+hibernate+springMVC如果上传文件不想使用flash那么你可以采用HTML5;截图前段模块是bootstarp框架;不废话直接来代码;spring-mvc配置文件;效果截图如下:
详细实现如下:
1、mvc-config.xml
<?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
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
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
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
@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
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、前台页面
<％@ 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>
0
投稿猜你喜欢
- 本文实例讲述了Android编程实现读取本地SD卡图片的方法。分享给大家供大家参考，具体如下：private Bitmap getDiskB
介绍 在开发过程中，我们有时候会遇到非接口调用而出发程序执行任务的一些场景，比如我们使用quartz定时框架通过配置文件来启动定时任务时，- 基本使用使用WebView通常是需要网络的,所以需要加上访问网络的权限<uses-permission android:name=&q
- 最近在用SpringMvc做Http接口时，对方在调用我接口时发现Date格式的默认转化为long，因此在前端页面看到的是一串数字。我们可以
- 服务限流，是指通过控制请求的速率或次数来达到保护服务的目的，在微服务中，我们通常会将它和熔断、降级搭配在一起使用，来避免瞬时的大量请求对系统
- 1. 前言不知道小伙伴对于日期字段，在项目中都是如何处理的，是单独给每个字段都自定义日期格式还是做全局格式设置？这个我之前啊，是
- 本文实例讲述了Spring使用ClassPathResource加载xml资源。分享给大家供大家参考，具体如下：一 代码package le
- 一、序言Java多线程编程线程池被广泛使用，甚至成为了标配。线程池本质是池化技术的应用，和连接池类似，创建连接与关闭连接属于耗时操作，创建线
- 本文实例为大家分享了android实现简单活动转盘的具体代码，供大家参考，具体内容如下页面public class CircleTurnta
- java 创建线程Java提供了线程类Thread来创建多线程的程序。其实，创建线程与创建普通的类的对象的操作是一样的，而线程就是Threa
- 学习内容：1.普通参数2.pojo参数3.嵌套pojo4.数组参数5.集合参数6.解决中文乱码7.json数据传递参数案例分析：1.pom.
- 题目：使用struts2自定义 * ，完成用户登陆才能访问权限的实现在session中存放user变量表示用户登陆，若user为空则用户没有
- 在springboot的开发中,有时候我们会有不同的配置,例如日志打印,数据库连接等,开发,测试,生产每个环境可能配置都不一致,还好,spr
- 在有向图中，边是单向的：每条边连接的两个顶点都是一个有序对，它们的邻接性是单向的。许多应用都是天然的有向图，如下图。为实现添加这种单向性的限
- System类的常用用法1,主要获取系统的环境变量信息public static void sysProp()throws Exceptio
- 本文实例为大家分享了C#简单爬虫案例，供大家参考，具体内容如下using System;using System.Collections.G
- mapper.xml文件<?xml version="1.0" encoding="UTF-8"
- 在android开发中，我们时常会遇到对字符串中某些固定的字段实现可点击和颜色的设置，现粘贴处我在开发中如何设置这些属性的。代码如下：pri
- 来自同事_Smile的封装应用，记录学习一下，分享给大家，具体如下：1、AnimImageViewLoader类的封装/** * 适用于an
- 1.File对象java封装的一个操作文件及文件夹（目录）的对象。可以操作磁盘上的任何一个文件和文件夹。2.创建文件方式一：根据路径构建一个
