• A+

文件上传进度条

文件上传主要步骤: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;
    }
}
复制代码

 

所属分类:前端

 0 条回应

我有话说:
    ×