juery ui 进度条

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>


<style type="text/css">

    #divprogressbar{

        width:350px;

        height:30px;

    }

    .progress-label{

        float:left;

        margin-left:40%;

        margin-top:3px;

    }

</style>


<script type="text/javascript">

    jQuery(function () {

        jQuery("#uploadSuccess").hide();

        jQuery('form#upload').ajaxForm(function (data) {

//            jQuery("#uploadSuccess").html(data);

//            jQuery("#uploadSuccess").show();

            $('#divprogressbar').progressbar({value:100});

            clearTimeout(t2);

            $(".progress-label").text(data);

        });

    });


    //进度条控制

    function progressBar(data){

        $('#divprogressbar').progressbar({value:0});

        $('#divprogressbar').progressbar({

            value:0,

            change:function(){

                $(".progress-label").text($("#divprogressbar").progressbar("value")+"%");

            },

            complete:function(){

                    $(".progress-label").text(data);

                return true;

            }

        });

        function progress(){

            var val= $('#divprogressbar').progressbar("value") || 0;

            $('#divprogressbar').progressbar("option","value",val+1);

            if(val<99)

            {

                t2= setTimeout(progress,100);

            }else{

                 val=0;

                t2= setTimeout(progressBar(""),100);

            }

        }

        setTimeout(progress,100);

    }

</script>



<body>

<br/>

<div id="divprogressbar"><div class="progress-label"></div></div>

<div id="uploadSuccess">上传中</div>

<form id="upload" onsubmit="progressBar('')" action="dataservice/db/db_save.jsp?handle=importData&ds_db_id=<%=request.getParameter("ds_db_id")%>&db_table=<%=request.getParameter("db_table")%>" enctype="multipart/form-data" method="post">

    <input type="file" id="excel" name="excel">

    <input type="submit" value="导入">


     <br>

    <input type="radio" name="dataType"  value="0" />实际数据<br />

    <input type="radio" name="dataType"  value="1" />预测数据<br />

</form>


</body>

</html>


你可能感兴趣的:(juery ui 进度条)