jquery前端文件上传进度条（非插件），spring boot文件上传实时进度条，主要代码ajax

╰半夏微凉° 2022-04-14 07:10 679阅读 0赞

# jquery前端文件上传进度条（非插件），spring boot文件上传实时进度条 #

> 为了更好地用户体验，我们在做文件上传时需要将文件上传的实时进度返回给浏览器进行展示

>  请注意返回的进度是从浏览器上传到服务器的这一段的进度条，而不是后台的controller方法的处理进度

开始动手写：

spring boot快速搭建项目，只要一个编写controller即可，为了能测试大文件上传，需要编写一个配置类，配置文件上传的大小

**配置类**

package com.ning.config;
    
    import javax.servlet.MultipartConfigElement;
    
    import org.springframework.beans.factory.annotation.Value;
    import org.springframework.boot.web.servlet.MultipartConfigFactory;
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    @Configuration
    public class FileUploadConfig {
    	@Bean
    	public MultipartConfigElement multipartConfigElement(
    			@Value("${multipart.maxFileSize}") String maxFileSize,
    			@Value("${multipart.maxRequestSize}") String maxRequestSize) {
    		MultipartConfigFactory factory = new MultipartConfigFactory();
    		// 单个文件最大
    		factory.setMaxFileSize(maxFileSize);
    		// 设置总上传数据总大小
    		factory.setMaxRequestSize(maxRequestSize);
    		return factory.createMultipartConfig();
    	}
    }

**application.properties**

multipart.maxFileSize=500Mb
    multipart.maxRequestSize=500Mb

**UploadController**

package com.ning.controller;
    
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.RestController;
    import org.springframework.web.multipart.MultipartFile;
    
    @RestController
    public class UploadController {
    	@RequestMapping("/upload")
    	public String uplaod(@RequestParam("file") MultipartFile file) {
    		System.out.println(file);
    		return "上传文件成功!";
    	}
    }

至此，java程序编写完成，接下来是前端html，也很简洁，进度条为了好看我采用了bootstrap的进度条

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>文件上传进度条</title>
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    </head>
    <body>
    	<input type="file" id="fileBtn">
    	<div class="progress">
    	  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
    	    <span class="sr-only">40% Complete (success)</span>
    	  </div>
    	</div>
    	<button type="button" class="btn btn-success" id="subBtn">点击上传文件</button>
    	<script type="text/javascript">
    		$("#subBtn").click(function(){
    			var formData = new FormData();  
    			formData.append("file",$("#fileBtn")[0].files[0]);
    			$.ajax({
    				url:"/upload",
    				type:"post",
    				data:formData,
    				contentType: false,//必须false才会自动加上正确的Content-Type
                	processData: false,
                	xhr:function(){
                		myXhr = $.ajaxSettings.xhr();
                		if(myXhr.upload){ //检查upload属性是否存在  
                            //绑定progress事件的回调函数  
                            myXhr.upload.addEventListener('progress',function(e){
                            	var curr=e.loaded;
                    			var total=e.total;
                    			process=curr/total*100;
                    			console.log(process);
                    			$(".progress-bar").css("width",process+"%");
                            }, false);   
                        }  
                		return myXhr; 
                	},
                	success:function(data){
                		console.log(data);
                	}
    			});
    		});
    	</script>
    </body>
    </html>

这是全部的主要文件了，页面效果是这样的：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzE2Mjcy_size_16_color_FFFFFF_t_70][]

选择文件后点击上传就进度条就会动起来： 效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzE2Mjcy_size_16_color_FFFFFF_t_70 1][]

> 再次强调这个进度条是，浏览器端到controller方法之前的进度条，而不是controller方法的执行进度

如果我的分享可以帮到大家欢迎点赞分享哦！可以到我的个人网站支持一下哦，大量技术干货哦！

[http://www.xinxiera.cn][http_www.xinxiera.cn]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzE2Mjcy_size_16_color_FFFFFF_t_70]: /images/20220414/606dc8f4e58542f8881e364db48ee44e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzE2Mjcy_size_16_color_FFFFFF_t_70 1]: /images/20220414/f09130a0c08a4c3a91c54e7328140ae4.png
[http_www.xinxiera.cn]: http://www.xinxiera.cn