jQuery进度栏不起作用

Santosh kumar

我正在使用Jquery进度栏,但无法正常工作,它只在进度栏中显示[object Object]%,而我正在使用jquery liabry和CSS,但无法在我的页面中正确显示。如何解决它,我试图添加更多的jQuery插件。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <link type="text/css" href="CSS/ui.all.css" rel="stylesheet" />
    <script type="text/javascript" src="Scripts/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="Scripts/ui.core.js"></script>
    <script type="text/javascript" src="Scripts/ui.progressbar.js"></script>
    <script src="Scripts/jquery-ui.js"></script>
    <script type="text/javascript" src="/js/jquery/ui/jquery.ui.progressbar.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {

            $("#Button1").click(function (evt) {
                var xhr = new XMLHttpRequest();
                var data = new FormData();
                var files = $("#FileUpload1").get(0).files;
                for (var i = 0; i < files.length; i++) {
                    data.append(files[i].name, files[i]);
                }
                xhr.upload.addEventListener("progress", function (evt) {
                    if (evt.lengthComputable) {
                        var progress = Math.round(evt.loaded * 100 / evt.total);
                        $("#progressbar").progressbar("value", progress);
                    }
                }, false);
                xhr.open("POST", "Handler.ashx");
                xhr.send(data);

                $("#progressbar").progressbar({
                    max: 100,
                    change: function (evt, ui) {

                        $("#progresslabel").text($("#progressbar").progressbar("value") + "%").toString();
                    },
                    complete: function (evt, ui) {
                        $("#progresslabel").text("File upload successful!");
                    }
                });
                evt.preventDefault();
            });
        });

    </script>
    <style type="text/css">
        .progressbar {
            width: 300px;
            height: 21px;
        }

        .progressbarlabel {
            width: 300px;
            height: 21px;
            position: absolute;
            text-align: center;
            font-size: small;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Label ID="Label1" runat="server" Text="Select File(s) to Upload :"></asp:Label>
            <br />
            <br />
            <asp:FileUpload ID="FileUpload1" runat="server" AllowMultiple="true" />
            <br />
            <br />
            <asp:Button ID="Button1" runat="server" Text="Upload" />
            <br />
            <br />
            <div id="progressbar" class="progressbar">
                <div id="progresslabel" class="progressbarlabel"></div>
            </div>
        </div>
    </form>
</body>
</html>
Santosh kumar
i will add following jquery reference and it is working fine.

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="Scripts/jquery-ui.js"></script>
    <script type="text/javascript" src="/js/jquery/ui/jquery.ui.progressbar.min.js"></script>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章