springmvc+ajax文件上传进度条

最新推荐文章于 2020-12-09 14:48:26 发布

不想写代码~

最新推荐文章于 2020-12-09 14:48:26 发布

阅读量184

点赞数 2

文章标签： java jquery spring web

本文链接：https://blog.csdn.net/weixin_44922129/article/details/105008212

版权

java 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

spring

1 篇文章 0 订阅

订阅专栏

springmvc+ajax文件上传进度条

在这里插入图片描述

通过XMLHttpRequest时间监听获得上传文件大小和已上传的大小。



/*-- Jsp页面代码 --*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery文件上传进度条</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery.min.js"></script>
<style type="text/css">
	.UpLoadStatus{
		margin-left:200px;
		width:600px;
		height:15px;
		border-radius:5px;	
		border:1px solid red;
	}
	#UpLoadBar{
		width:0px;
		height:15px;
		background:green;
	}
</style>
</head>
<body>
	
	<h1 id="Status" style="margin-left:400px;">未上传文件</h1>
	<div class="UpLoadStatus">
		<div id="UpLoadBar">
		</div>
	</div>
	<h1>上传页面</h1>
	<input type="file" id="file">
	<img alt="图片" width="1600" style="margin-left:150px;margin-top:200px;" src="${pageContext.request.contextPath }/static/images/keyBord.png">
</body>
<script type="text/javascript">
	$(function () {
		$("#file").change(function () {
			var formData = new FormData()
            formData.append("file",$("#file")[0].files[0]);//append()里面的第一个参数file对应
	        $.ajax({
	            url:"/Plug/UpLoadFile",
	            type:"POST",
	            data:formData,
	            async:true,
	            contentType:false,
	            processData:false,
	            xhr: function() {
	                var xhr = new XMLHttpRequest();
	                //使用XMLHttpRequest.upload监听上传过程，注册progress事件，打印回调函数中的event事件
	                xhr.upload.addEventListener('progress', function (e) {
	                    //loaded代表上传了多少
	                    //total代表总数为多少
	                    var baifenbi = (e.loaded / e.total) * 100;
	                    var progressRate = baifenbi.toFixed(2) + '%';
	                    //通过设置进度条的宽度达到效果
	                    $("#Status").text(progressRate);
	                    console.log(600*baifenbi/100+"px");
	                    $("#UpLoadBar").css("width", 600*baifenbi/100+"px");
	                })
	                return xhr;
	            },
	            success:function (result) {
	                console.log(result);
	            },
	            error:function (error) {
	                console.log("error:"+error);
	            }
	        })
		})
	})
</script>
</html>


/*-- 后台映射处理代码 --*/
@ResponseBody
@RequestMapping(value = "/UpLoadFile",produces = "text/html;charset=UTF-8")
public String UpLoadFile(
		HttpServletResponse res,
		HttpServletRequest  req,
		@RequestParam("file") MultipartFile file) throws IOException{
	System.out.println("上传文件实现");
	if (!file.isEmpty()) {
		String fileName = file.getOriginalFilename();
		InputStream inputStream = file.getInputStream();
		File file2 = new File("F:/MyJava/Plug/WebContent/static/upload/"+fileName);
		FileOutputStream fileOutputStream = new FileOutputStream(file2);
		byte[] datas =new byte[1024];
		int read = -1;
		while ((read = inputStream.read(datas)) != -1) {
			fileOutputStream.write(datas,0,read);
		}
		System.out.println(file.getSize());
		return "上传成功";
	}else {
		return "上传失败";
	}
}

/*-- 配置文件  springmvc配置文件   --*/
<!-- 配置静态资源 -->

<!-- 因为要使用到jquery所以要配置静态资源 -->

<mvc:default-servlet-handler/>
<mvc:annotation-driven/>
.......
<!-- 配置文件上传解析器 -->
   <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
       <!--设置文件上传的大小  字节  -->
       <property name="maxUploadSize" value="2097152000"></property>
       <property name="defaultEncoding" value="UTF-8"></property>
   </bean>

/*-- web.xml配置文件 --*/

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
	
	<!-- 默认的DispatcherServlet配置 -->
	<servlet>
		<servlet-name>springDispatcherServlet</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<init-param>
			<param-name>contextConfigLocation</param-name>
			<!-- 配置springmvc的配置文件地址 -->
			<param-value>classpath:springmvc.xml</param-value>
		</init-param>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<!-- 配置默认的Servlet映射 -->
	<servlet-mapping>
		<servlet-name>springDispatcherServlet</servlet-name>
		<!-- url改成/ -->
		<url-pattern>/</url-pattern>
	</servlet-mapping>
	
</web-app>

本地测试使用大的文件才会有效果，小的上传太快，看不到效果。（比如游戏安装包，没有大文件选好几个文件夹打成压缩包）

不想写代码~

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
2
评论
springmvc+ajax文件上传进度条

springmvc+ajax文件上传进度条通过XMLHttpRequest时间监听获得上传文件大小和已上传的大小。/*-- Jsp页面代码 --*/<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JQuery文件上传进度条</title>&l...
复制链接

扫一扫