jQuery进度条用线程更改值

时间:2017-10-02 07:32:53

标签: javascript jquery ajax spring-mvc progress-bar

我正在使用Spring MVC开发WebApp。我有以下过程:首先,用户必须上传文件。之后,将编辑上传的文件。

到目前为止,这个过程运作良好。现在,我想通过进度条向用户显示进程的进度。这是我的.jsp文件,其中包含用于上传文件和进度条的表单:

<!DOCTYPE HTML>

    <%@page import="de.pwc.logic.Constants"%>
    <%@page import="java.util.ResourceBundle"%>
    <%@page import="de.pwc.logic.TickmarkManager"%>
    <%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>

    <html>
    <head>
        ...

    </head>
    <body>

        <form:form modelAttribute="circleUpModel" method="POST"
            onsubmit="return checkIfPdf(this);" action="">

            ...

        </form:form>

        <div id="progressbar">
            <div class="progress-label">Loading...</div>
        </div>

    </body>

    <script type="text/javascript">

        function checkIfPdf() {
            var fup = document.getElementById('upload');
            var fileName = fup.value;
            var ext = fileName.substring(fileName.lastIndexOf('.') + 1);
            if (ext == "pdf" || ext =="PDF") {
                return true;
            } else {
                alert("Upload pdf files only");
                fup.focus();
                return false;
            }
        }

        $(function() {
            var progressbar = $( "#progressbar" );
            progressLabel = $( ".progress-label" );
            $( "#progressbar" ).progressbar({
               value: false,
               change: function() {
                  progressLabel.text( 
                     progressbar.progressbar( "value" ) + "%" );
               },
               complete: function() {
                  progressLabel.text( "Loading Completed!" );
               }
            });

            function progress() {
               var val = ???
               progressbar.progressbar( "value", val );
            }
         });

    </script>
    </html>

相应的控制器调用一个遍历文件页面的线程。每当线程编辑了文件的单个页面时,进度条应该迭代。

问题是我不知道如何在我的.jsp文件中获取线程进程的当前页面。线程和.jsp如何相互通信?我认为它可以与Ajax一起使用,但我以前从未使用过ajax。

我感谢任何建议!

0 个答案:

没有答案