文件上传进度条
java高级架构师全套vip教学视频，需要的加我qq1197852132
文件上传主要步骤：1.获得上传文件的总长度。
2.设置读取文件的大小。
3.利用读取的文件总和除文件总长度，将结果存到session中。
进度条读取主要步骤:1.利用定时器每多少毫秒调取一个方法。
2.取出session中的结果，返回给前台显示。
总的来时进度条就是利用两个ajax一个上传文件，一个获得进度。
jsp代码如下：
进度条样式：http://www.jq22.com/jquery-info2385
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html > <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ page import="com.jit.platform.login.bean.*" %> <%@ page import="com.jit.platform.login.util.*" %> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; UserBean user = (UserBean)session.getAttribute(CommonConstant.USERNAME); String _theme = CommonConstant.DEFAULT; if(null != user){ _theme = user.getTheme(); } %> <head> <base href="<%=basePath%>"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="basics/js/basics_systemJQuery.js"></script> <link rel="stylesheet" href="basics/plugin/jquery-easyui/themes/cupertino/bootstrap.css" type="text/css"></link> <title></title> <script type="text/javascript"> //上传文件 $(document).ready(function(){ $('#subbut').bind('click', function(){ $.ajax({ type: 'POST', url: "<%=request.getContextPath()%>/FileUpload/upload.do", data: {}, dataType: 'json', success : function(data){ $('#proBar').css('width',data.rate+''+'%'); $('#proBar').empty(); $('#proBar').append(data.show); if(data.rate == 100){ window.clearInterval(intId); } }}); }); });
//获得进度 $(document).ready(function(){ $('#subbut').bind('click', function(){ var eventFun = function(){ $.ajax({ type: 'POST', url: "<%=request.getContextPath()%>/FileUpload/process.do", data: {}, dataType: 'json', success : function(data){ var tbox =$(".tbox"); var tiao =$(".tiao"); tiao.css("width",data).html(data); if(data == "100%"){ window.clearInterval(intId); } }});}; var intId = window.setInterval(eventFun,100); }); }); </script> <style> .box{width:397px; height:300px; margin:30px auto; } .ok{width:200px; height:100px; margin:0 auto; text-align:center; background:#999; line-height:100px; color:#FFF; display:none; } .tbox{width:397px; height:49px; background:url('<%=request.getContextPath()%>/common/image/bak.png') no-repeat; margin-top:20px;} .tbox div{width:0px; height:49px; background:url('<%=request.getContextPath()%>/common/image/pro.png') no-repeat; text-align:center; font-family:Tahoma; font-size:18px; line-height:48px;} </style> </head> <body> <form id='fForm' action="fileServlet?method=upload" method="post" enctype="multipart/form-data"> <div class="control-group"> <label class="control-label">上传进度:</label> <div class="box"> <div class="ok"></div> <div class="tbox"> <div class="tiao"></div> </div> </div> </div> <div class="control-group"> <div class="controls"> <button type="button" id="subbut" class="btn" onclick="tijiao()">submit</button> </div> </div> </form> </body> </html>
后台代码
package com.jit.el.elManage.action; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import org.apache.log4j.Logger; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; @Controller @RequestMapping(value = "/FileUpload") public class FileUploadController { Logger log = Logger.getLogger(FileUploadController.class); /** * upload 上传文件 * @param request * @param response * @return * @throws Exception */ @RequestMapping(value = "/upload") public void upload(HttpServletRequest request, HttpServletResponse response) throws Exception { File file = new File("D:\\123.wmv"); FileInputStream fis = new FileInputStream(file); FileOutputStream fos = new FileOutputStream("D:\\1234567.wmv"); byte[] buf = new byte[500]; int size = 0; int num = 0; while((size = fis.read(buf))>-1){//循环读取 fos.write(buf, 0, size); num+=size; String a = String.valueOf( num/48860068.0*100).substring(0, 5)+"%"; if(a.equals("100.0%")){ a="100%"; } HttpSession session = request.getSession(); session.setAttribute("jd",a); } fos.flush(); fos.close(); fis.close(); } /** * process 获取进度 * @param request * @param response * @return * @throws Exception */ @RequestMapping(value = "/process") @ResponseBody public String process(HttpServletRequest request, HttpServletResponse response) throws Exception { HttpSession session = request.getSession(); String attribute = (String) session.getAttribute("jd"); session.setAttribute("jd", "0%"); // session.removeAttribute("jd"); System.err.println(attribute); return attribute; } }
