效果图：
/*-- web.xml --*/
1 <?xml version="1.0" encoding="UTF-8"?> 2 <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"> 3 4 <!-- 默认的DispatcherServlet配置 --> 5 <servlet> 6 <servlet-name>springDispatcherServlet</servlet-name> 7 <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> 8 <init-param> 9 <param-name>contextConfigLocation</param-name> 10 <!-- 配置springmvc的配置文件地址 --> 11 <param-value>classpath:springmvc.xml</param-value> 12 </init-param> 13 <load-on-startup>1</load-on-startup> 14 </servlet> 15 <!-- 配置默认的Servlet映射 --> 16 <servlet-mapping> 17 <servlet-name>springDispatcherServlet</servlet-name> 18 <!-- url改成/ --> 19 <url-pattern>/</url-pattern> 20 </servlet-mapping> 21 22 </web-app>
/*-- Jsp页面 --*/
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html> 4 <html> 5 <head> 6 <meta charset="UTF-8"> 7 <title>JQuery文件上传进度条</title> 8 <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery.min.js"></script> 9 <style type="text/css"> 10 .UpLoadStatus{ 11 margin-left:200px; 12 width:600px; 13 height:15px; 14 border-radius:5px; 15 border:1px solid red; 16 } 17 #UpLoadBar{ 18 width:0px; 19 height:15px; 20 background:green; 21 } 22 </style> 23 </head> 24 <body> 25 26 <h1 id="Status" style="margin-left:400px;">未上传文件</h1> 27 <div class="UpLoadStatus"> 28 <div id="UpLoadBar"> 29 </div> 30 </div> 31 <h1>上传页面</h1> 32 <input type="file" id="file"> 33 <img alt="图片" width="1600" style="margin-left:150px;margin-top:200px;" src="${pageContext.request.contextPath }/static/images/keyBord.png"> 34 </body> 35 <script type="text/javascript"> 36 $(function () { 37 $("#file").change(function () { 38 var formData = new FormData() 39 formData.append("file",$("#file")[0].files[0]);//append()里面的第一个参数file对应 40 $.ajax({ 41 url:"/Plug/UpLoadFile", 42 type:"POST", 43 data:formData, 44 async:true, 45 contentType:false, 46 processData:false, 47 xhr: function() { 48 var xhr = new XMLHttpRequest(); 49 //使用XMLHttpRequest.upload监听上传过程，注册progress事件，打印回调函数中的event事件 50 xhr.upload.addEventListener('progress', function (e) { 51 //loaded代表上传了多少 52 //total代表总数为多少 53 var baifenbi = (e.loaded / e.total) * 100; 54 var progressRate = baifenbi.toFixed(2) + '%'; 55 //通过设置进度条的宽度达到效果 56 $("#Status").text(progressRate); 57 console.log(600*baifenbi/100+"px"); 58 $("#UpLoadBar").css("width", 600*baifenbi/100+"px"); 59 }) 60 return xhr; 61 }, 62 success:function (result) { 63 console.log(result); 64 }, 65 error:function (error) { 66 console.log("error:"+error); 67 } 68 }) 69 }) 70 }) 71 </script> 72 </html>
/*-- Maven下的pom.xml --*/
1 <dependencies> 2 <!-- Spring-context Spring框架主要库 --> 3 <dependency> 4 <groupId>org.springframework</groupId> 5 <artifactId>spring-context</artifactId> 6 <version>4.0.0.RELEASE</version> 7 </dependency> 8 <!-- springMcv包 9 需要 加入spring-web与spring-webmvc的jar包 10 因为spring-webmvc 依赖 了spring-web, Maven会自动维护此依赖 11 --> 12 <dependency> 13 <groupId>org.springframework</groupId> 14 <artifactId>spring-webmvc</artifactId> 15 <version>4.0.0.RELEASE</version> 16 </dependency> 17 <!-- file upload part --> 18 <dependency> 19 <groupId>commons-fileupload</groupId> 20 <artifactId>commons-fileupload</artifactId> 21 <version>1.3</version> 22 </dependency> 23 24 </dependencies>
/*-- springmvc配置文件 --*/
1 <dependencies> 2 <!-- Spring-context Spring框架主要库 --> 3 <dependency> 4 <groupId>org.springframework</groupId> 5 <artifactId>spring-context</artifactId> 6 <version>4.0.0.RELEASE</version> 7 </dependency> 8 <!-- springMcv包 9 需要 加入spring-web与spring-webmvc的jar包 10 因为spring-webmvc 依赖 了spring-web, Maven会自动维护此依赖 11 --> 12 <dependency> 13 <groupId>org.springframework</groupId> 14 <artifactId>spring-webmvc</artifactId> 15 <version>4.0.0.RELEASE</version> 16 </dependency> 17 <!-- file upload part --> 18 <dependency> 19 <groupId>commons-fileupload</groupId> 20 <artifactId>commons-fileupload</artifactId> 21 <version>1.3</version> 22 </dependency> 23 24 </dependencies>
/*-- 请求处理java代码 --*/
1 @ResponseBody 2 @RequestMapping(value = "/UpLoadFile",produces = "text/html;charset=UTF-8") 3 public String UpLoadFile( 4 HttpServletResponse res, 5 HttpServletRequest req, 6 @RequestParam("file") MultipartFile file) throws IOException{ 7 System.out.println("上传文件实现"); 8 if (!file.isEmpty()) { 9 String fileName = file.getOriginalFilename(); 10 InputStream inputStream = file.getInputStream(); 11 File file2 = new File("F:/MyJava/Plug/WebContent/static/upload/"+fileName); 12 FileOutputStream fileOutputStream = new FileOutputStream(file2); 13 byte[] datas =new byte[1024]; 14 int read = -1; 15 while ((read = inputStream.read(datas)) != -1) { 16 fileOutputStream.write(datas,0,read); 17 } 18 System.out.println(file.getSize()); 19 return "上传成功"; 20 }else { 21 return "上传失败"; 22 } 23 }