文件上傳進度條

時間 2019-11-10

標籤文件上傳進度简体版

原文原文鏈接

文件上傳主要步驟：1.得到上傳文件的總長度。javascript

　　　　　　　　　2.設置讀取文件的大小。css

3.利用讀取的文件總和除文件總長度，將結果存到session中。html

進度條讀取主要步驟:1.利用定時器每多少毫秒調取一個方法。java

　　　　　　　　 2.取出session中的結果，返回給前臺顯示。jquery

總的來時進度條就是利用兩個ajax一個上傳文件，一個得到進度。web

jsp代碼以下：ajax

進度條樣式：http://www.jq22.com/jquery-info2385spring

<!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>

後臺代碼apache

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;
    }
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。